bruno456

Usuario (Argentina)

Primer post: 7 feb 2012Último post: 7 feb 2012

Posts

136

Puntos totales

Comentarios

5 Efectos hover aplicados en imagenes

Hazlo Tu MismoporAnónimo2/7/2012

Bueno amigos en este Post les mostrare 5 propiedades llamadas Hovers. Definición de Hover:Hover es una propiedad de CSS3 que realiza una acción al pasar el cursor por arriba de cierto elemento definido en la hoja de estilo. Empecemos con los hover: Hover 1-Efecto “Bump up” : Excelente para usar una lista de imágenes horizontal, lo que hace es elevar el elemento modificando el margin-top. Ejemplo: Demo Codigo HTML: [color=#000000][color=#000000] <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta name="description" content="description"> <title>Titulo de la pagina</title> <link rel="stylesheet" type="text/css" media="screen" href="Dirección hoja de estilo "/>  </head> <body>  <div class="ex1"> <img src="Dirección imagen 1"> <img src="Dirección imagen2"> <img src="Dirección imagen3"> <img src="Dirección imagen4"> </div> </body> </html> [/color][/color] Una vez que tengamos eso procederemos a crear el estilo donde ponemos lo siguiente: [color=#000000][color=#000000] .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; } [/color][/color] En este estilo lo que definimos es que las etiquetas img contenidas en el div class: ex1 tengan un borde de 5px solido y de color gris (#ccc), que este "flotando" a la izquierda con un margen de 15px. Después tenemos definido el hover que dice que cuando pasemos el cursor por arriba de esa imagen suba 2px en respecto a donde esta ubicada normalmente. Hover 2-Efecto “Stack & Grow”: Al pasar el cursor por encima de la imagen, esta aumenta su anchura y altura mediante una transición CSS. Ejemplo: Demo Codigo HTML: [color=#000000][color=#000000] <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta name="description" content="description"> <title>Efecto “Stack & Grow”</title> <link rel="stylesheet" type="text/css" media="screen" href="Dirección hoja de estilo "/>  </head> <body>  <div id="containerEx2"> <div id="ex2"> <img src="Dirección imagen 1"> <img src="Dirección imagen2"> <img src="Dirección imagen3"> <img src="Dirección imagen4"> </div> </div> </body> </html> [/color][/color] Proseguimos con el estilo: [color=#000000][color=#000000] #containerEx2 { 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; } [/color][/color] En este estilo definimos el ancho, alto y margen de la imagen en estilo normal y después lo agrandamos cambiando los px en el :hover. Hover 3-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. Ejemplo: Demo Codigo HTML: [color=#000000][color=#000000] <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta name="description" content="description"> <title>Efecto “Fade Text in”</title> <link rel="stylesheet" type="text/css" media="screen" href="Direccion del estilo"/>  </head> <body> <h1>Hover Over the Image</h1> <div id="ex3"> <img src="Dirección de la imagen"><p>Acá el texto que queres que "caiga"</p> </div> </body> </html> [/color][/color] Ahora el estilo: [color=#000000][color=#000000] #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; } [/color][/color] En este estilo se define el color de y la anchura del texto, que después se cambian para que "aparezca" en el hover. Hover4-Efecto “Crooked Photo”(Ya va el ante ultimo) : 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. Ejemplo: Demo Codigo HTML: [color=#000000][color=#000000] <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta name="description" content="description"> <title>Efecto “Crooked Photo”</title> <link rel="stylesheet" type="text/css" media="screen" href="estilo4.css"/>  </head> <body> <div id="ex4"> <img src="Dirección imagen 1"> <img src="Dirección imagen2"> <img src="Dirección imagen3"> <img src="Dirección imagen4"> <img src="Dirección imagen 5"> <img src="Dirección imagen6"> </div> </body> </html> [/color][/color] El código CSS3: [color=#000000][color=#000000] #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); } [/color][/color] En esta ocasión la hoja de estilo se utiliza para marcar el grado de rotacion de la imagen y el borde de cada imagen. Bueno amigos este ya es el ultimo hover : Hover 5-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(En otros navegadores le quita un poco de luz). Demo Codigo HTML: [color=#000000][color=#000000] <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta name="description" content="description"> <title>Efecto “Fade In and Reflect”</title> <link rel="stylesheet" type="text/css" media="screen" href="estilo5.css"/>  </head> <body> <div id="containerEx5"> <div id="ex5"> <img src="Dirección imagen 1"> <img src="Dirección imagen2"> <img src="Dirección imagen3"> <img src="Dirección imagen4"> <img src="Dirección imagen 5"> <img src="Dirección imagen6"> <img src="Dirección imagen7"> <img src="Dirección imagen8"> </div> </div> </body> </html> [/color][/color] El ultimo Estilo: [color=#000000][color=#000000] #containerEx5 { background : none repeat scroll 0 0 #333333; margin: 50px 0; min-height: 100%; padding: 20px; } #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); } [/color][/color] En este estilo se define el color, el lugar, el reflejo de la imagen(solo en -webkit- ) y el esparcimiento de la luz. Cualquier Duda contactame por MP. Si te gusto Recomendalo o comenta. Si te gustan mis aportes Seguime

136