Survol avec un PNG et effet flou (carrément)
Jow Kari
Messages postés
2
Date d'inscription
Statut
Membre
Dernière intervention
-
Jow Kari Messages postés 2 Date d'inscription Statut Membre Dernière intervention -
Jow Kari Messages postés 2 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
Voilà bien la première fois que je prends le chemin de "comment ça marche" dans ce sens.
En générale je trouve toujours réponse, sans devoir poster, mais là ...je sèche tellement, que je commence à me fissurer dangereusement
Je vais faire court :
J'ai une page web qui à un fond (illustration japonaise réalisée sur un programme de graphisme et sauvé en jpg) elle est dans une div pour la garder identique sur toutes les pages et elle est répétée dans toutes les feuilles .html de mon site (logique pour un fond)
J'ai créé une page d'accueil avec une théière dont le fond est transparent (en .png)
Jusque là tout le monde s'e**erde en lisant ce post, ok ...
Je rêverais de pouvoir réaliser ce qui suit :
au survol de la souris le fond devient complètement flou et la théière reste intacte (en taille et couleur,...) ce qui devrait créer une sorte de profondeur de champ.
Evidemment je ne suis pas une bête de javascript, css et html. Je dois juste rentrer ce travail de fin d'étude mardi midi. Tout mon site est fait, tout tourne nickel, mais vraiment je bloque pour créer une page d'accueil attirant.
Je me demandais si je créais un jpg avec le même fond de site (japonais) que j'utilise mais le rendre flou et avec la théière dessus bien nette, et que quand je survolerais le .png initial ça enclencherait cette image...mais même en essayant le onmouseover, ça cloche quelque part ...
Quelqu'un se sent-il d'attaque pour comprendre mon truc ?
Je précise que ma section est le web-design, d'où un minable skill du codage...
Franchement si quelqu'un m'a compris chapeau, et si en plus il m'aide il recevrait mon respect et ma gratitude sur sept générations (wé...je suis pas sur que ça va attirer les vénaux :D )
ps : mes lignes pour le moment sont:
--> HTML
<body>
<div id="fond">
<section id="accueil">
<a href ="presentation.html"><img src="./images/logoaccueil.png" alt="accueil"></a>
</section>
</div>
</body>
-->CSS
#fond {
background-image:url("../images/fond.jpg");
background-repeat:no-repeat;
height:768px;
width:1024px;
margin:auto;
}
#accueil {
background-repeat:no-repeat;
margin-top:180px;
margin-left:170px;
position: relative;
}
Que les pros du codage pardonnent ma misérable conception de leur art :/
Voilà bien la première fois que je prends le chemin de "comment ça marche" dans ce sens.
En générale je trouve toujours réponse, sans devoir poster, mais là ...je sèche tellement, que je commence à me fissurer dangereusement
Je vais faire court :
J'ai une page web qui à un fond (illustration japonaise réalisée sur un programme de graphisme et sauvé en jpg) elle est dans une div pour la garder identique sur toutes les pages et elle est répétée dans toutes les feuilles .html de mon site (logique pour un fond)
J'ai créé une page d'accueil avec une théière dont le fond est transparent (en .png)
Jusque là tout le monde s'e**erde en lisant ce post, ok ...
Je rêverais de pouvoir réaliser ce qui suit :
au survol de la souris le fond devient complètement flou et la théière reste intacte (en taille et couleur,...) ce qui devrait créer une sorte de profondeur de champ.
Evidemment je ne suis pas une bête de javascript, css et html. Je dois juste rentrer ce travail de fin d'étude mardi midi. Tout mon site est fait, tout tourne nickel, mais vraiment je bloque pour créer une page d'accueil attirant.
Je me demandais si je créais un jpg avec le même fond de site (japonais) que j'utilise mais le rendre flou et avec la théière dessus bien nette, et que quand je survolerais le .png initial ça enclencherait cette image...mais même en essayant le onmouseover, ça cloche quelque part ...
Quelqu'un se sent-il d'attaque pour comprendre mon truc ?
Je précise que ma section est le web-design, d'où un minable skill du codage...
Franchement si quelqu'un m'a compris chapeau, et si en plus il m'aide il recevrait mon respect et ma gratitude sur sept générations (wé...je suis pas sur que ça va attirer les vénaux :D )
ps : mes lignes pour le moment sont:
--> HTML
<body>
<div id="fond">
<section id="accueil">
<a href ="presentation.html"><img src="./images/logoaccueil.png" alt="accueil"></a>
</section>
</div>
</body>
-->CSS
#fond {
background-image:url("../images/fond.jpg");
background-repeat:no-repeat;
height:768px;
width:1024px;
margin:auto;
}
#accueil {
background-repeat:no-repeat;
margin-top:180px;
margin-left:170px;
position: relative;
}
Que les pros du codage pardonnent ma misérable conception de leur art :/
A voir également:
- Survol avec un PNG et effet flou (carrément)
- Effet miroir word - Guide
- Effet miroir photo - Accueil - Photo
- Effet miroir telephone - Guide
- Comment enlever le flou sur snap - Forum Snapchat
- Point d'interrogation dans un carré ✓ - Forum Samsung
