Sujet Précédent Sujet Suivant

Survol avec un PNG et effet flou (carrément)

Fermé
Jow Kari Messages postés 2 Date d'inscription dimanche 23 septembre 2012 Statut Membre Dernière intervention 23 septembre 2012 - 23 sept. 2012 à 16:08
Jow Kari Messages postés 2 Date d'inscription dimanche 23 septembre 2012 Statut Membre Dernière intervention 23 septembre 2012 - 23 sept. 2012 à 16:27
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 :/


A voir également:

2 réponses

Réponse 1 / 2
telliak Messages postés 3655 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 27 mars 2024 875
23 sept. 2012 à 16:14
SAlut,
au survol de la souris le fond devient complètement flou
Au survol de quoi ?
0
Réponse 2 / 2
Jow Kari Messages postés 2 Date d'inscription dimanche 23 septembre 2012 Statut Membre Dernière intervention 23 septembre 2012
23 sept. 2012 à 16:27
Oupsss, :S

au survol de la souris sur la théière ...
0

Discussions similaires

Comment enlever le flou dans les SIMS 4 ?
x_roxy78_x -
mlleprincesse -

13 réponses
[Photoshop] Fichier en PNG qui ne s'ouvre pas
Naddya -
porios -

7 réponses
rendre un texte flou plus net
lulubidon -
m00kka -

3 réponses
Déchiffrer un texte illisible sur une photo
Dita1010 -
Dita1010 -

6 réponses
Quel est l'émoji du point d'interrogation dans un carré ?
lola -
Lolierzvg -

2 réponses