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.
.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.
/*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.
#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.
#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.
#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.
Yeuri Samuel dice
Me encantaron, los tratare de poner en practiva.
jinux dice
Me gustaron lastima que no se casi php 🙂
Josue Ochoa dice
No es PHP, es CSS 😀
jinux dice
ok ,entonces como se supone que lo uso? como podria usar eso en una pagina de php
Josue Ochoa dice
Como si lo usases en un HTML es igual, por ejm en el primer ejemplo, copias el código y luego cambias «.ex1 img» por el elemento que quieras animar
Si no me entiendes muy bien pasate por este tutorial de CSS la parte especifica de selectores:
https://tursos.com/tutoriales/html-css/que-es-css-y-para-que-sirve/#selectores
Carlos dice
XD
Jonathan dice
Muy Buenos efectos los pondré en Práctica Gracias 🙂
Rudolf dice
Excelentes Tutoriales!!!! 🙂
er noi dice
Simples y efectivos. Simplemente geniales. Espero que te animes y publiques mas.
Josue Ochoa dice
Hace unos días publique uno de como hacer un botón animado, pásate por este tutorial.
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?
Josue dice
ese efecto usa el atributo width en el texto que va a aparecer, pega el código que estas usando para verlo.
Lizette dice
he aquí por si gustar verlo, sé que es un cochinero aún :/
http://www.megaupload.com/?d=JMOG9WW7
Ruth dice
simplemente genial efectivo
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?
Josue Ochoa dice
a que ejemplo te refieres?
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)
Josue Ochoa dice
Te refieres al efecto donde salen las publicaciones populares en la derecha?
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!
Josue Ochoa dice
Ahh, es un plugin de WordPress se llama Shareaholic.
cutero dice
Josue infinitas gracias!
wtd dice
Muy bueno este articulo gracias…..Lo pondre en practica…..
Dimas dice
Estan muy buenas amigo
gracias y saludos
jordano_p dice
Muy buenos ejemplos, sencillos y muy útiles. Tu blog esta muy interesante Felicitaciones.
Alan dice
Excelente aporte, gracias 😉
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.
Josue Ochoa dice
En tu hoja de estilos, si no tienes una crea una y enlazala.
https://tursos.com/tutoriales/html-css/que-es-css-y-para-que-sirve
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??
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.
Jean dice
O:!! sorprendentes! realmente fabulosos!!
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!!!!
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.
Javier dice
Excelente aporte Josue, muy bueno y sencillo !
Saludos !
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 😉
Josue Ochoa dice
Utilizo http://www.shareaholic.com/ para WordPress, supongo que debe haber una version para Blogger o HTML.
Marcos dice
Los efectos no funcionan en IE9, a que se debe eso?
Josue Ochoa dice
Es debido a que IE9 no soporta todas las propiedades CSS3 que se usan en estos ejemplos.
Litzor Colombia dice
Gran Post bro! gracias, el diseño de ésta página es muy bueno, saludos…
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;
}
Josue Ochoa dice
No tengo mucha experiencia con las propiedades de -moz-, casi siempre prefiero -webkit-, pon tu ejemplo aqui http://tinkerbin.com/ y me lo envias para verlo.
john luzel dice
excelente, suncionan y se ven geniales, le da mas calidad al diseño de la pagina. mis respetos!!!!
Javier Díaz dice
Muy buen aporte Bro! Son magnificos los efectos, aunque aun batallando un poco con IE, ese navegador mero nos pone a sacarle jugo al código hehehe Saludos 😀
José dice
Excelentes efectos. Felicitaciones!!
Miguel Angel dice
muy bueno… era justo lo que estaba buscando… muchas gracias…
Eborio Linárez dice
Muy buenos efectos te felicito por tu trabajo
hugo dice
muy practicos…..publiqen mas
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
Josue Ochoa dice
Twitter, Facebook o suscribete por RSS.
MARIANO dice
MUY BUENO!!!! LO USE Y QUEDO INCREIBLE GRACIAS!!
Freddy Meza dice
Exelente compadre muchas gracias, funciona de maravilla, un 10 para ti.
eamane dice
wowww no pensé que se podían hacer estas cosas con css 😀 excelente tutorial 😉
Iganacio dice
Los ejemplos que pusistes son muy bueno, pero mi pregunta es como logro una animacion como la apllicacion http://flipboard.com/ ya que me gustaria poder añadir ese tipo de animacion.
Andres D.M dice
Excelente tutorial eres un genio 😀
josueochoa dice
Muchas gracias por tu comentario.
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
josueochoa dice
Pueden ser muchas cosas, da mas detalles.
bulgarito dice
estoy usando el tema Xenon y logre poner el primer efecto mostrado en la pagina, pero no logre ninguno de los demas
Serrgio dice
Buenisimo, te rifas
josecruzchavez dice
muy buenos efectos, gracias
Tim Rowley dice
Thanks, I like these !
Remy LeBaut dice
Son excelentes los efectos, muy buenos y con un poco de ingenio se puede aplicar a cualquier cosa!!!
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