Fphover

BEBELOUBELGA -

Comment faire un hover d'une image

Afficher la suite

2 réponses

mr_demonicon

Le meme qu'avec du texte (:hover)

<!DOCTYPE html> 
<html> 
  <head> 
    <style type="text/css">
     .imgBox
      { 
        width: 441px; 
        height: 248px; 
        background: url(http://www.corelangs.com/css/box/img/water.jpg)no-repeat;
      } 
     .imgBox:hover
      { 
        -moz-box-shadow: 0 0 10px #ccc;
        -webkit-box-shadow: 0 0 10px #ccc; 
        box-shadow: 0 0 10px #ccc; 
      } 
     </style> 
    </head> 
   <body> 
       <div class="imgBox"> </div> 
   </body> 
</html>

Pour plus d'info: http://www.corelangs.com/css/box/hover.html

Bonne continuation et n'oubliez pas le risque zéro c'est dans vos rêves.

inspiring

On peut aussi ameliorer le code comme ca

<!DOCTYPE html> 
<html> 
  <head> 
    <style type="text/css">
     .imgBox
      { 
        width: 441px; 
        height: 248px; 
        background: url(http://www.corelangs.com/css/box/img/water.jpg)no-repeat;
      } 
     .imgBox:hover
      { 
        -moz-box-shadow: 0 0 10px #ccc;
        -webkit-box-shadow: 0 0 10px #ccc; 
        box-shadow: 0 0 10px #ccc; 
      } 
.mytext {padding:6px 12px; margin:30px; background:rgba(0,0,0,.8); color:#fff; font-size:20px; display:block}
.mytext2 {padding:6px 12px; margin:30px; background:rgba(0,0,0,.8); color:#fff; font-size:20px; display:none}
.imgBox:hover .mytext {display:none}
.imgBox:hover .mytext2 {display:block}
     </style> 
    </head> 
   <body> 
       <div class="imgBox"><div class="mytext">je ne dis pas bonjour ...</div><div class="mytext2">donc je ne suis pas poli !</div> </div> 
   </body> 
</html>

mr_demonicon

celui la a l'air plus en consequence a ce moment la


<!DOCTYPE html> 


<html >
 <head>
 
<style type="text/css">
 .imgBox
  { 
     width: 191px;
     height: 191px;
     background: url(http://www.corelangs.com/css/box/img/duck.png) no-repeat;
  } 
 .imgBox:hover 
  { 
   width: 191px;
   height: 191px; 
   background: url(http://www.corelangs.com/css/box/img/peng.png) no-repeat;
   } 
 .mytext 
  {
   padding:6px 12px; 
   margin:10px; 
   background:rgba(0,0,0,.8); 
   color:#fff; 
   font-size:20px;
   display:block;
   text-align: center;
   
  }
 .mytext2 
  {
   padding:6px 12px; 
   margin:10px; 
   background:rgba(0,0,0,.8); 
   color:#fff;
   font-size:20px; 
   display:none;
   text-align:center;
   

  }
 .imgBox:hover
  .mytext {display:none;}
 .imgBox:hover 
  .mytext2 {display:block;}
</style> 

 </head> 
  <body> 
    <div class="imgBox"> 
           <div class="mytext">Je ne dis pas bonjour ...</div>
         <div class="mytext2">...donc je ne suis pas poli !</div> 
    </div> 
  </body> 
</html>

Newsletters