Efecto persiana con CSS3
En este artículo vamos a ver como crear unos paneles con efecto persiana al pasar el ratón por encima con CSS3.
En el ejemplo que vamos a ilustrar vamos a tener 3 paneles con una imagen, uno al lado del otro, y que al pasar el ratón por encima de ellos aparecerá un texto descriptivo desplegando para arriba con efecto persiana la imagen que se ve previamente.
Lograr este efecto con CSS3 es muy sencillo, tan solo necesitaremos añadir los siguientes estilos a nuestra hoja de estilos:
.element {
border: 1px solid #CCCCCC;
background: #EEEEEE;
float: left;
height: 120px;
margin-right: 10px;
overflow: hidden;
position: relative;
width: 317px;
}
.element a {
text-decoration: none;
color: #000;
}
.img, .description {
height: 120px;
}
.img {
margin-top: 0;
background: #000000;
-webkit-transition-property: margin-top;
-webkit-transition-duration: .5s;
-moz-transition-property: margin-top;
-moz-transition-duration: .5s;
-o-transition-property: margin-top;
-o-transition-duration: .5s;
-ms-transition-property: margin-top;
-ms-transition-duration: .5s;
}
.element:hover .img {
margin-top: -120px;
}
.description {
background: #EEEEEE;
color: #000;
font-family: Arial;
font-size: 12px;
}
.description p {
padding:0 0 0 5px;
}
Donde la clave del asunto está en el código marcada en color rojo.
Después tendremos nuestro código HTML dentro del <body>:
<div class="element"> <a href="https://www.jose-aguilar.com/blog/secciones/prestashop/"> <div class="img"> <img src="images/prestashop.png" /> </div> <div class="description"> <p>En esta página encontrarás un montón de trucos para hacer y mejorar tus tiendas virtuales desarrolladas con Prestashop.</p> </div> </a> </div> ...
Como se puede observar este método es bastante sencillo, desafortunadamente no funcionará si el navegador es muy viejo o no tiene activadas las transiciones. Para esos casos se puede optar por utilizar un framework de JavaScript para que lleve a cabo el procedimiento. Ver como aplicar el efecto persiana con jQuery.
Autor
Te ha servido? Valora esta entrada!
Comparte en las redes sociales
¿Buscas trabajo de programador?
Muy valiosa su ayuda, relicé el codigo linea por linea y me funcionó. De maravilla, pero hay algo que me gustaría saber. En mi caso, quité las imágenes y le agregué un degradado a cada estado; por lo que me gustaría saber cómo podria hacer para que cuando se haga click en uno de los botones, me lleve a un estado activo, al cual obviamente le he creado una clase que me permita ver ese estado.
Gracias
Según entiendo me parece que solo tienes que controlar el evento click con jQuery y en ese momento cambiar la clase al elemento. Algo asi:
$(‘.element’).on(‘click’, function() {
$(this).addClass(‘class_nuevo_estado’);
});
Espero haberte ayudado,
Saludos
muy buenos efectos, gracis por sus aportes