Menú adicional

Tursos

Tutoriales y cursos de desarrollo web en español

Usted está aquí: Inicio / Articulos / 5 Efectos hover CSS3 para copiar y pegar

5 Efectos hover CSS3 para copiar y pegar

publicado el

Prueba estos 5 efectos para :hover hechos unicamente con CSS3, estan listos para aplicar, solo pega el código CSS en tu hoja de estilos y aplica las clases:

Efecto «Bump up»

Excelente para usar una lista de imágenes horizontal, lo que hace es elevar el elemento modificando el margin-top.

efecto-css3-hover

Demo →

.ex1 img{
    border: 5px solid #ccc;
    float: left;
    margin: 15px;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}
 
.ex1 img:hover {
    margin-top: 2px;
}

Efecto «Stack & Grow»

Al pasar el cursor por encima de la imagen, esta aumenta su anchura y altura mediante una transición CSS.

efecto-css3-hover

Demo →

/*Example 2*/
#container {
	width: 300px;
	margin: 0 auto;
}
 
#ex2 img{
    height: 100px;
    width: 300px;
    margin: 15px 0;
     -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}
 
#ex2 img:hover {
	height: 133px;
	width: 400px;
	margin-left: -50px;
}

Efecto «Fade Text in»

Este efecto es bastante interesante, es un div que contiene una imagen y un texto, primero se alinea la imagen a la izquierda y al div contenedor se le definen las propiedades line-height: 0px y color: transparent, para que cuando el cursor pase por la imagen, esto cambie de manera animada, dando el efecto que el texto cae.

efecto-css3-hover

Demo →

#ex3 {
	width: 730px;
	height: 133px;
	line-height: 0px;
	color: transparent;
	font-size: 50px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	   font-weight: 300;
	text-transform: uppercase;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}
 
#ex3:hover {
	line-height: 133px;
	color: #575858;
}
 
#ex3 img{
	float: left;
	margin: 0 15px;
}

Efecto «Crooked Photo»

Ideal para una galería de fotos, este efecto usa la propiedad CSS3 -transform: rotate, hace que cuando el cursor pase por la imagen esta gire 7 grados a la izquierda.

efecto-css3-hover

Demo →

#ex4 {
	width: 800px;
	margin: 0 auto;
}
 
#ex4 img {
	margin: 20px;
	border: 5px solid #eee;
	-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
	-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
	box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}
 
#ex4 img:hover {
	-webkit-transform: rotate(-7deg);
	-moz-transform: rotate(-7deg);
	-o-transform: rotate(-7deg);
}

Efecto «Fade In and Reflect»

Este efecto solo es compatible con navegadores -webkit, ya que usa la propiedad -webkit-box-reflect, que solo es soportada por Chrome y Safari, de igual manera se ve bastante bien.

efecto-css3-hover

Demo →

#ex5 {
	width: 700px;
	margin: 0 auto;
	min-height: 300px;
}
 
#ex5 img {
	margin: 25px;
	opacity: 0.8;
	border: 10px solid #eee;
 
	/*Transition*/
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
 
	/*Reflection*/
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
 
 
#ex5 img:hover {  
   opacity: 1;
 
   /*Reflection*/
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
 
   /*Glow*/
  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}

Articulo original en DesignShack.

Interacciones con los lectores

Comentarios

  6. Lizette dice

    quiero aplicar efecto de fade text in a unos links, pero no me sale, quiero que los links se desplieguen hacia abajo al pasar el cursor sobre los títulos («h2»), pero no me salen. también copie tu código para moverle y vi que al cambiar el float de la imágen a bottom o top ya no muestra el texto, por qué?; esto solo funciona con imágenes?

    Responder

  8. Sergio dice

    Oye la verdad esta super increible muchas gracias,solo tengo un problema cuando se posiscionan en una determinada zona se ve como si la imagen temblarapor que sucede?

    Responder

  9. oriondx dice

    hola que tal muy interesantes tus efectos, pero el que me interesa es saber como hicistes el efecto que usas para los links de redes sociales de tu pagina web si se pudiera compartir te lo agradeceria mucho (soy nuevo en esto de css)

    Responder

  10. oriondx dice

    no quiero el efecto que sale abajo cerca de donde comienza los COMENTARIOS el efecto de los link de redes sociales los que estan a lado de «CONTENIDO RELACIONADO» ese me gusta no se como se llama ese efecto para buscarlo en inter….! se agradece de antemano!

    Responder

  16. Julio dice

    Están geniales, me parece muy útil el efecto Bum Up para mi blog. La cuestión como ignorante es, ¿dónde meto ese código? mira que desde mi básico conocimiento de este lenguaje he modificado mi plantillo, pero es que este no se dónde debo meterlo. Gracias.

    Responder

  17. Kattin dice

    Josue muchísimas gracias por compartir tus conocimientos, exelentes efectos.Una pregunta.
    Haciendo referencia al Efecto “Stack & Grow” , como hago para que al pasar el mouse solo se mueva la imagen que estoy señalando y no todas, asi como en el Efecto “Bump up” que se mueve de una en una. He estado modificando y no me sale. Me ayudas??

    Responder

    • Josue Ochoa dice

      La animación de Stack & Grow hace que el elemento crezca y al estar ordenadas de forma vertical, las imagenes de arriba y abajo tienen que hacerse un espacio para que la que esta enfocada pueda ‘crecer’, intenta ponerlas de forma horizontal.

      Responder

  19. Kattin dice

    Hola Josue, Gracias por tu respuesta fusione algunas cosas y funciona tal como quiero. ¿Puedo hacerte otra pregunta? Por fa, por fa.
    En el efecto “Fade Text in” a mi me gustaria que en vez de aparecer un texto apareciera una imagen, me podrias colaborar? en el hover le coloco la direccion de la imagen pero sale encima de la que ya tengo.
    Graciasssssss!!!!

    Responder

    • Josue Ochoa dice

      El problema es que ese efecto usa line-height para crear la animación, y como haz de saber line-height es una propiedad que solo afecta a textos, se tendria que utilizar un codigo diferente para hacer lo que quieres.

      Responder

  21. ulises tomas dice

    saludos Josue, el post me gusto, pero me gustaria saber como puedo agregar la barra de Te gusto? compartelo? y te sale el efecto over en este contenedor en donde tienes las redes sociales, como se hace esto? me podrias enseñar aparte se puede aplicar a blogger? gracias por tu respuesta, saludos 😉

    Responder

  24. Esteban dice

    Hola, estan muy buenos los efectos. Te hago una pregunta, tengo una imagen en la cual le aplique el efecto de girar 360º cuanto pasas el mouse. El problema es que solo funciona una vez. Si vuelvo a pasar el mouse por segunda vez ya no hace nada. Como puedo solucionarlo?
    AH otra cosa, si paso rapidamente el mouse por la imagen, esta me queda a la mitad del giro y no vuelve a la normalidad, es decir, tengo q pasarlo lentamente para que termine de girar, cuando en realidad preferiria que siemrpe vuelva a su estado normal.

    Este es mi codigo:
    #logo{
    -moz-animation-name: animacion-logo;
    -moz-animation-duration: 1s;
    -moz-animation-play-state: paused;
    }
    @-moz-keyframes animacion-logo{
    100%{
    -moz-transform: rotate(360deg);
    }
    }
    #logo:hover{
    -moz-animation-play-state: running;
    }

    Responder

  31. jrmix dice

    Hola Josue una pregunta me estoy iniciando en este tema del ccs y al ver tu tutorial me quedaron muchas ganas de seguir aprendiendo una molestia donde te puedo seguir para poder ver mas de tus totorales.

    aaa 10!!!!! perfecto tutorial felicidades tus padres deben estar orgullosos de ti

    Responder

  37. bulgarito dice

    Alguien me puede decir como puedo poner estos efectos en mi blog de wordpress. intente pegando el CSS en la hoja style.css y luego llamarlo en el html pero no legre nada

    Responder

  42. Eldon Makutz dice

    Hi, I’m making contact with yourself in the direction of check with if your self’re seeking for a improved website link indexer. We accurately consist of remaining the beta verify step (GSA discussion board) and the responses is superior. As oneself understand the aged references within just the business are fewer prosperous due to the fact couple Google upgrades. This is not our situation.
    Our services is the suitable for Google nevertheless far too index Bing and Yandex. Our formulation are all infinite, submissions AND variety of URLs, which will make them the perfect associate for Search engine marketing organizations.

    We for that reason offer you oneself 24 several hours of tests every time on your own motivation toward show that we are the ideal: http://intersofteurasia.ru/redirect.php?url=http://www.miniurlz.com/LP-IN2

    Password: G8D2EZ9P3

    View yourself shortly

    Responder

Retroenlaces

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.