Originales efectos hover con CSS3
Desde hace algún tiempo es tendencia en desarrollo y diseño web el uso de efectos sorprendentes en el hover de ciertos elementos. A continuación explicaremos cómo usar alguno de estos efectos con solo CSS3, aprovechando sobretodo el uso de transiciones.
En otros artículos ya te hemos explicado cómo aprovechar tu hoja de estilos CSS para crear efectos y animaciones de forma sencilla, como en los tutoriales para maquetar listas con CSS o aplicar filtros especiales en imágenes.
Efecto 1
Usaremos una imagen que al pasar el cursor sobre ella, se deslice oblicuamente hasta desaparecer para mostrar un texto escondido debajo. Este es el resultado:
-
Suscríbete a la Newsletter
No te pierdas nuestros últimos artículos, se el primero en estar al día acerca de nuestros posts.
La estructura HTML que necesitamos es:
<ul class="demo-1 effect">
<li>
<h2>This is a cool title!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
</li>
<li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>El código CSS que necesita esta estructura es:
.demo-1 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px;
background-color:rgba(26,76,110,0.5)
}
.demo-1 p,.demo-1 h2 {
color:#fff;
padding:10px;
left:-20px;
top:20px;
position:relative
}
.demo-1 p {
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0
}
.demo-1 h2 {
font-family:'Lato';
font-size:20px;
line-height:24px;
margin:0;
}
.effect img {
position:absolute;
margin:-15px 0;
right:0;
top:0;
cursor:pointer;
-webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
-moz-transition:top .4s ease-in-out,right .4s ease-in-out;
-o-transition:top .4s ease-in-out,right .4s ease-in-out;
transition:top .4s ease-in-out,right .4s ease-in-out
}
.effect img.top:hover {
top:-230px;
right:-330px;
padding-bottom:200px;
padding-left:300px
}
Efecto 2
En este efecto deslizaremos la imagen principal ligeramente hacia abajo, dejando espacio suficiente para mostrar el texto que hay debajo. Ejemplo:
-
Expertos en desarrollo web
Confía en nuestra experiencia.
La estructura HTML necesaria es la siguiente:
<ul class="demo-2 effect">
<li>
<h2 class="zero">This is a cool title!</h2>
<p class="zero">Lorem ipsum dolor sit amet.</p>
</li>
<li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>Mientras que el código CSS necesario es el que sigue:
.demo-2 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px;
background-color:rgba(26,76,110,0.5)
}
.demo-2 p,.demo-2 h2 {
color:#fff;
padding:10px;
left:-20px;
top:20px;
position:relative
}
.demo-2 p {
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0
}
.demo-2 h2 {
font-size:20px;
line-height:24px;
margin:0;
font-family:'Lato'
}
.effect img {
position:absolute;
left:0;
bottom:0;
cursor:pointer;
margin:-12px 0;
-webkit-transition:bottom .3s ease-in-out;
-moz-transition:bottom .3s ease-in-out;
-o-transition:bottom .3s ease-in-out;
transition:bottom .3s ease-in-out
}
.effect img.top:hover {
bottom:-96px;
padding-top:100px
}
h2.zero,p.zero {
margin:0;
padding:0
}
Efecto 3
Con este efecto, conseguimos crear la impresión de una tarjeta que se voltea mostrando las dos caras:
-
Contacta con nosotros
Cualquier duda que tengas o comentario que quieras hacernos llegar, no dudes en contactar con nosotros.
El código HTML necesario varía un poco respecto de los anteriores ejemplos, ahora haremos uso de algunas etiquetas HTML5:
<ul class="demo-3">
<li>
<figure>
<img src="images/image1.jpg" alt=""/>
<figcaption>
<h2>This is a cool title!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
</figcaption>
</figure>
</li>
</ul>El CSS necesario:
.demo-3 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px
}
.demo-3 figure {
margin:0;
padding:0;
position:relative;
cursor:pointer;
margin-left:-50px
}
.demo-3 figure img {
display:block;
position:relative;
z-index:10;
margin:-15px 0
}
.demo-3 figure figcaption {
display:block;
position:absolute;
z-index:5;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.demo-3 figure h2 {
font-family:'Lato';
color:#fff;
font-size:20px;
text-align:left
}
.demo-3 figure p {
display:block;
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0;
color:#fff;
text-align:left
}
.demo-3 figure figcaption {
top:0;
left:0;
width:100%;
height:100%;
padding:29px 44px;
background-color:rgba(26,76,110,0.5);
text-align:center;
backface-visibility:hidden;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
}
A tener en cuenta
Si vas a usar alguno de estos efectos, ten en cuenta que algunos valores posicionales en el código CSS van a depender del tamaño de la imagen que queramos usar. También puedes invertir la dirección de las transiciones, puedes personalizar los efectos o crear los tuyos propios.
