Efectos hover con CSS3 Título primera imagen Lorem ipsum dolor sit amet, consectetur... -

24.02.2015

Efectos hover con CSS3

Título primera imagen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ipsum quam, tincidunt at laoreet nec, egestas at felis. Proin sed purus lorem. Donec euismod orci pretium dui.
Mas Info
Título segunda imagen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ipsum quam, tincidunt at laoreet nec, egestas at felis. Proin sed purus lorem. Donec euismod orci pretium dui.
Mas Info

HTML

<div id="container">
<div id="cabecera">
<h1>Efectos hover con CSS3</h1>
</div>
<div id="contenido">
<ul class="efectos">
<li><img style="border: 1px dotted #52BEFE; -webkit-border-radius: 1em/0.5em; -moz-border-radius: 1em/0.5em; border-radius: 1em/0.5em; -webkit-box-shadow: #6d3112 3px 3px 9px; -moz-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px;" src="http://productions.caffix.org/wp-content/uploads/2009/11/m-6e0568979b684dc9a70f8317aa58_128_128.gif" alt="" width="135" height="135" />
<h2>T&iacute;tulo primera imagen</h2>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ipsum quam, tincidunt at laoreet nec, egestas at felis. Proin sed purus lorem. Donec euismod orci pretium dui.</p>
<a class="boton" title="Haz click aqu&iacute; para m&aacute;s informaci&oacute;n" href="#">Mas Info</a></li>
<li><img style="border: 1px dotted #52BEFE; -webkit-border-radius: 1em/0.5em; -moz-border-radius: 1em/0.5em; border-radius: 1em/0.5em; -webkit-box-shadow: #6d3112 3px 3px 9px; -moz-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px;" src="http://www.gifsde.com/uploads/651ce2_ohmmmmm.gif" alt="" width="135" height="135" />
<h2>T&iacute;tulo segunda imagen</h2>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ipsum quam, tincidunt at laoreet nec, egestas at felis. Proin sed purus lorem. Donec euismod orci pretium dui.</p>
<a class="boton" title="Haz click aqu&iacute; para m&aacute;s informaci&oacute;n" href="#">Mas Info</a></li></ul></div></div>

CSS

background:#B4C1DE url(../img/bg.png) 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:#B4C1DE url(../img/efecto-fondo.jpg) no-repeat center center;
position:relative;
list-style:none;
width:400px;
height:250px;
overflow:hidden;
border:20px solid #FFF;
 border-radius: 1em 0.5em;
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
}
 ul.efectos li img {
z-index:30;
position:absolute;
top:0;
left:0;
-webkit-transition:all .7s ease-out;
-moz-transition:all .7s ease-out;
-ms-transition:all .7s ease-out;
-o-transition:all .7s ease-out
}
 ul.efectos li h2 {
font-size:3em;
color:#fff;
line-height:1.5em;
letter-spacing:.1em;
text-align:center;
text-transform:uppercase;
-webkit-transition:all .5s ease-in;
-webkit-transform:scale(0.1);
-moz-transition:all .5s ease-in;
-moz-transform:scale(0.1);
-ms-transition:all .5s ease-in;
-ms-transform:scale(0.1);
-o-transition:all .5s ease-in;
-o-transform:scale(0.1);
opacity:0;
margin:0;
padding:0
}
 
ul.efectos li:hover h2 {
padding-top:30px;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
opacity:1
}ul.efectos li a.boton {
display:block;
text-align:center;
font-family:helvetica, arial, sans-serif;
position:relative;
text-transform:uppercase;
letter-spacing:.2em;
text-decoration:none;
font-size:1.6em;
background:#333;
color:#fff;
width:150px;
margin-left:125px;
border:none;
-webkit-transition:all .6s ease-in;
-webkit-transform:translateY(230px) scale(5);
-moz-transition:all .6s ease-in;
-moz-transform:translateY(230px) scale(5);
-ms-transition:all .6s ease-in;
-ms-transform:translateY(230px) scale(5);
-o-transition:all .6s ease-in;
-o-transform:translateY(230px) scale(5);
opacity:0;
cursor:pointer;
z-index:50;
padding:4px
}
ul.efectos li:hover a.boton {
-webkit-transform:translateY(0) scale(1);
-moz-transform:translateY(0) scale(1);
-ms-transform:translateY(0) scale(1);
-o-transform:translateY(0) scale(1);
opacity:1
}