Eklablog Tous les blogs Top blogs Technologie & Science Tous les blogs Technologie & Science
Editer l'article Suivre ce blog Administration + Créer mon blog
MENU

Tutorial, CSS, HTML

 

Hover. Con imagen para fondo
Fuente
 













<div id="container"><div id="cabecera">&nbsp;</div><div id="contenido"><ul class="efectos"><li><img src="http://senderosdeiluminacion.bligoo.com/media/users/16/814428/images/public/187154/1325488685529-DEVI_SARASVATI_by_VISHNU108.gif?v=1325488806005" alt=" " width="200" height="190" /><hr /></li><li><img src="http://fc05.deviantart.net/fs70/f/2011/330/3/2/shiva_temple_by_vishnu108-d4hcvmg.gif" alt=" " width="200" height="190" /><hr /></li></ul></div></div> 
<style type="text/css"><!--
body { background:#ffffff url(https://lh4.googleusercontent.com/-QVeub426KUE/U-Cuu1VAosI/AAAAAAAA0Us/vqAuDzatiJQ/w289-h149-no/2.gif) repeat top left; font-family:'Yanone Kaffeesatz', sans-serif;
font-size:62.5%;
margin:0;
padding:0
}
ul.efectos {
position:relative;
margin:0;
padding:0
}
ul.efectos li {
background:#ffffff url(https://lh4.googleusercontent.com/-QVeub426KUE/U-Cuu1VAosI/AAAAAAAA0Us/vqAuDzatiJQ/w289-h149-no/2.gif) no-repeat center center; position:relative;
list-style:none;
width:200px;
height:190px;
overflow:hidden;
border:2px solid #FFF;
border-radius:8em/3em;
float:left;
-webkit-box-shadow:0 0 10px #333;
-moz-box-shadow:0 0 10px #333;
-ms-box-shadow:0 0 10px #333;
-o-box-shadow:0 0 10px #333;
box-shadow:0 0 10px #333;
margin:0 20px 40px;
padding:0
}
ul.efectos li:hover img {
>-webkit-transform:scale(6);
-moz-transform:scale(6);
-ms-transform:scale(6);
-o-transform:scale(6);
opacity:0
}
--></style>
Retour à l'accueil
Partager cet article
Repost0
Pour être informé des derniers articles, inscrivez vous :
Commenter cet article