Effet de plis sur image
Si vous survolez cette image, vous verrez apparaître un effet de plis sur l’image en haut à gauche. Je vais vous expliquer comment arriver à ce résultat.
Si vous le souhaitez, le fichier zipper contenant l’intégralité de ce code est disponible en bas de page
Tout d’abord le code html à insérer entre les balises <body> et </body>
Code HTML
|
1 2 3 |
<div class="bloc-tuto-boite"><a class="bloc-tuto tuto-pli" href="" title=""> <img src="images/icone.png" alt="" height="182" width="182"></a> </div> |
Code CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
.bloc-tuto-boite{ width:182px; height:182px; padding:2px; position:relative; z-index:20; background-color: transparent; background-image: url(../images/fond.jpg); background-repeat: no-repeat; } .bloc-tuto-boite .bloc-tuto{ display:block; width:182px; height:182px; position:relative; z-index:30 } .tuto-pli{ position:relative; z-index:38 } a.tuto-pli:hover{ text-decoration:none } .tuto-pli:before,.tuto-pli:after{ content:' '; position:absolute; left:0; right:0; top:0;bottom:0 } .tuto-pli:before{ z-index:39; -moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 50px rgba(200,200,200,.3); -khtml-box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 50px rgba(200,200,200,.3); -webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 50px rgba(200,200,200,.3); -o-box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 50px rgba(200,200,200,.3); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 50px rgba(200,200,200,.3); -webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out } .tuto-pli:hover:before{ -moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 50px rgba(200,200,200,.6); -khtml-box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 50px rgba(200,200,200,.6); -webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 50px rgba(200,200,200,.6); -o-box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 50px rgba(200,200,200,.6); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 50px rgba(200,200,200,.6); } .tuto-pli:hover:after{ z-index:40; background-color: transparent; background-image: url(../images/pli.png); background-repeat: no-repeat; } |
Aucun commentaire