Efecto hover desaparición de imagen y aparición de texto html5

Con este efecto vamos a conseguir que al pasar el ratón por una imagen, ésta desaparezca de una forma bastante vistosa y en su lugar aparezca de la misma forma un texto. Para ello jugaremos con los efectos transform y transition que ya hemos visto en post anteriores.
Vamos a empezar explicando el código fuente de la página y luego programaremos el css:

<div class="cuadro">
    <img src="imagen.png" />
    <div class="contenido">
        <h3>Titulo</h3>
        <p>Texto</p>
    </div>
</div>

Como vemos, hemos introducido todo el efecto en una capa llamada “cuadro”, ésta se separa en dos apartados, una imagen y una nueva capa llamada “contenido”, que a su vez tiene dos apartados, el título y el texto… Vamos a empezar a estilar la capa principal llamada cuadro, pongo el código fuente del css y luego explico:

.cuadro {
    position:absolute;
    top:30;
    left:30;
    width:235;
    height:140;
    overflow:hidden;
    cursor:default;
    border:6px solid black;
    padding:5px;
    text-align:center;
}

Podemos ver que simplemente le hemos dado estilo a esta capa, dándole un ancho y alto, borde, padding… Ésto lo deberíamos conocer ya, pero si queréis refrescaros la memoria, os recomiendo entrar en: Curso gratis de css
Ahora programaremos la imagen:

.cuadro img {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    opacity:1;
}

Como vemos, hemos usado una transition de 0.5 segundos para que realice la acción del hover. Además le hemos dado una opacity con valor 1, con lo que le decimos que es visible.
Siguiendo el orden, vamos ahora con la capa contenido:

.contenido {
    position:absolute;
    top:0;
    width:435;
    height:380;
    overflow:hidden;
    opacity:0;
    -webkit-transform: rotate (0deg) scale(1);
    -moz-transform: rotate (0deg) scale(1);
    -o-transform: rotate (0deg) scale(1);
    transform: rotate (0deg) scale(1);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-transform: translateY(-200px) rotate(180deg);
    -moz-transform: translateY(-200px) rotate(180deg);
    -o-transform: translateY(-200px) rotate(180deg);
    transform: translateY(-200px) rotate(180deg);
}

De esta parte, destacaremos el opacity 0, con lo que le decimos que es transparente, el transform rotate y scale, con lo que le decimos que en éste momento se encuentra en posición horizontal y con su tamaño original, el transition 0.3 segundos que es lo que tardará en realizar el efecto, y el transform translateY y rotate, que en éste caso nos sirve para decirle que está 200px por encima girada 180 grados.
Seguimos con lo siguiente, el h3:

.cuadro h3 {
    opacity:0;
    position:relative;
    text-transform:uppercase;
    color:fff;
    -moz-transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    transform: translateY(-200px);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

Opacity 0, con lo que le decimos que es invisible en este momento, translateY -200px para que sepa que está 200 pixels por encima y transition 0.2 segundos para que sepa lo que tiene que tardar, y exactamente igual haremos el párrafo:

.cuadro p {
    opacity:0;
    position:relative;
    font-family:cursive;
    color:fff;
    -moz-transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    transform: translateY(-200px);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

Vale, pues hasta aquí todo bien, y nos queda la parte más fácil, programar los efectos de cada apartado, para lo que iremos en el mismo orden que antes:

.cuadro:hover img {
    transform: rotate(720deg) scale(0);
    -webkit-transform: rotate(720deg) scale(0);
    -moz-transform: rotate(720deg) scale(0);
    -o-transform: rotate(720deg) scale(0);
    opacity:0;
}

Como ahora queremos que la imagen desaparezca rotando, tendremos que darle un opacity 0, para decirle que cuando se produzca el efecto desaparezca, y un transform rotate 720 grados scale 0 para decirle que se haga pequeña (desaparezca) mientras da 2 vueltas completas…

.cuadro:hover .contenido {
    opacity:1;
    background:rgba(125,125,125,0.5);
    -moz-transform: translateY(0px) rotate(0deg);
    -webkit-transform: translateY(0px) rotate(0deg);
    -o-transform: translateY(0px) rotate(0deg);
    transform: translateY(0px) rotate(0deg);
}

En este caso queremos que la capa intermedia haga lo contrario, que se haga visible pero con un degradado en su color rgba de 0.5. Y que vuelva a la posición inicial (0,0) y se ponga horizontal…
Para el h3 y el párrafo usaremos el mismo código fuente, por lo que os los pongo aquí los dos y explico solo una vez:

.cuadro:hover h3 {
opacity:1;
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.cuadro:hover p {
opacity:1;
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.4s;
-moztransition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}

Muy sencillo, le decimos que vuelva a ser visible con el opacity 1, y que se ponga en posición inicial con el transform translateY 0px (recordemos que estaba en -200…

Sencillo verdad? si quieres ver cómo queda, entra en:

Efecto desaparición de imagen rotando y aparición de texto con html5

Y si quieres ver más sobre html5, entra en:

Curso gratis de html5 y css3

3 Responses to Efecto hover desaparición de imagen y aparición de texto html5

  1. Madryt dice:

    You are a very smart individual!

  2. no puedo posicionar el ejemplo dentro del aside , como puedo solucionarlo despues de que desaparece la imagen el texto se mira en la parte de abajo de el div cuadro seria de mucho su ayuda. saludos.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: