| |
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120741 Images lumineuses | | Coucou Voici comme faire pour que vos images s'illumine au passage de la souris Entre body et /body ou page d'accueil forum ou page html - Code:
-
<div id="containerEx5"> <div id="ex5"> <img src="URL VOTRE IMAGE"> <img src="URL VOTRE IMAGE"> <img src="URL VOTRE IMAGE"> <img src="URL VOTRE IMAGE"> <img src="URL VOTRE IMAGE"> <img src="URL VOTRE IMAGE"> <img src="URL VOTRE IMAGE"> <img src="URL VOTRE IMAGE"> </div> </div> CSS: - Code:
-
#ex5 { width: 700px; margin: 0 auto; min-height: 300px; } #ex5 img { margin: 25px; opacity: 0.8; /*Varier l'opacite*/ border: 10px solid #eee; /*Transition*/ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; /*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1))); } #ex5 img:hover { opacity: 1; /*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4))); /*Glow*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8); }
Dernière édition par Ptite_Perle le Ven 3 Avr 2020 - 18:41, édité 3 fois |
| | | | sandcreations
Partage
Merci pour ton partage de tes tutos, images
Présence
Merci pour ta présence sur le forum.
Partenaires
Très honoré d'être partenaire
Graphiste Messages : 493 Venue : 14/09/2012 Je suis : Age : 52 Je vie à : Valenciennes Humeur : cool Mes Points : 17281 Re: Images lumineuses | | sa va sur un forum mes pas sur une page html ces possible de avoir sur html |
| | | | Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120741 Re: Images lumineuses | | Coucou
Je vais tester pour forum
Bisous |
| | | | Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120741 Essai sur pagr d'accueil | | Coucou
Je viens d’essayé sur ma page d'accueil de mon forum de test
Dernière édition par Ptite_Perle le Ven 8 Oct 2021 - 17:52, édité 1 fois |
| | | | sandcreations
Partage
Merci pour ton partage de tes tutos, images
Présence
Merci pour ta présence sur le forum.
Partenaires
Très honoré d'être partenaire
Graphiste Messages : 493 Venue : 14/09/2012 Je suis : Age : 52 Je vie à : Valenciennes Humeur : cool Mes Points : 17281 Re: Images lumineuses | | je parle sur une page site j'ai fait un tes sur une page et rien |
| | | | Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120741 Re: Images lumineuses | | Coucou
Il faut que tu remplace URL DE VOTRE IMAGE, dans le code par url de ton image et ajouter le CSS sinon cela ne fonctionne pas Bisouss |
| | | | Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120741 Re: Images lumineuses | | Coucou
Après avoir essayée avec dreamweaver.
Dans ma page html j'ai mis ceci: cela fonctionne - Code:
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> #ex5 img { margin: 25px; opacity: 0.15; /*Varier l'opacite*/ border: 10px solid #eee; /*Transition*/ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; /*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1))); } #ex5 img:hover { opacity: 1; /*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4))); /*Glow*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8); } </style> <title>Titre de ta page htlm + css</title> </head>
<body> <div id="containerEx5"> <div id="ex5"> <img src="https://i.servimg.com/u/f55/14/04/66/48/vario_10.gif"> <img src="https://i.servimg.com/u/f55/14/04/66/48/vario_10.gif"> <img src="https://i.servimg.com/u/f55/14/04/66/48/vario_10.gif"> <img src="https://i.servimg.com/u/f55/14/04/66/48/vario_10.gif"> <img src="https://i.servimg.com/u/f55/14/04/66/48/vario_10.gif"> <img src="https://i.servimg.com/u/f55/14/04/66/48/vario_10.gif"> <img src="https://i.servimg.com/u/f55/14/04/66/48/vario_10.gif"> <img src="https://i.servimg.com/u/f55/14/04/66/48/vario_10.gif"> </div> </div> </body> </html>
|
| | | | sandcreations
Partage
Merci pour ton partage de tes tutos, images
Présence
Merci pour ta présence sur le forum.
Partenaires
Très honoré d'être partenaire
Graphiste Messages : 493 Venue : 14/09/2012 Je suis : Age : 52 Je vie à : Valenciennes Humeur : cool Mes Points : 17281 Re: Images lumineuses | | super merci ptite_perle sa fonctionne merci beaucoup bisous |
| | | | Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120741 Re: Images lumineuses | | Avec plaisir Sandrecrations
Bisous |
| | | |
Sujets similaires | |
|
Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |