Hace unos días yo estaba aplicando efecto del rollover de la imagen en un sitio web que estoy trabajando. La mayoría de los sitios web de la cartera está utilizando efecto del rollover de la imagen. En este tutorial aprenderemos i usted cómo crear vuelco Css imagen efecto. Estoy usando sólo una gráfica sencilla. El resto de estilos CSS es básica, con el código HTML simple.

Esta propiedad borde redondeado que no es compatible con IE. Ver Demo

háganos saber sus pensamientos? Si usted encuentra cualquier otros tutoriales que desea compartir con nosotros, no dude en hacernos saber por caer en un comentario.

Ejemplo:

Paso # 1 Estructura CSS

primero que crear un simple código Css

  ; margin : 0 ; } * (Padding: 0; margin: 0;)
 % normal Arial, Helvetica, sans-serif ; } body (font: 100% Arial, Helvetica, sans-serif;) 


 width : 280px ; height : 150px ; background-image : url ( land .jpg ) ; background-position : top ; -moz-border-radius : 10px ; -webkit-border-radius : 10px ; border : 10px solid #ccc ; font : 13px normal Arial, Helvetica, sans-serif ; line-height : 18px ; float :left ; margin : 0 10px 10px 0 ; } . rollover_img (width: 280px; height: 150px; background-image: url (tierra. jpg), background-position: top;-moz-border-radius: 10px;-webkit-border-radius: 10px; border: 10px solid # ccc; font: 13px Arial, Helvetica, sans-serif; line-height: 18px; float: left; margin: 0 10px 10px 0;) 
  color : #fff ; width : 280px ; height : 150px ; display : block ; text-decoration : none ; } . rollover_img a (color: # fff; width: 280px; height: 150px; display: block; text-decoration: none;) 
  { background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } . rollover_img a: hover (background: # 000; opacidad:. 60; filtro: (alfa opacidad = 60);) 
 display : none ; width : 280px ; padding : 5px ; } . rollover_img a span (display: none; width: 280px; padding: 5px;) 
  span { display : block ; } . rollover_img a: hover span (display: block;) 

Paso # 2 en HTML Estructura

Ahora creamos un simple código Html

 > <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. clase <div "rollover_img" => Título <a = "Ace Infoway India" href = "http://blog.aceinfowayindia.com"> <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Sed condimentum.  En volutpat.  Vestibulum elit.  Aenean vitae enim eget bibendum tellus pellentesque.  Sed at est Ejemplo de texto, Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ Span> </ a> </ div> 

Ver demostración

Siga con nosotros en Twitter, o suscribirse a los desarrolladores de Paraíso + RSS para los mejores tutoriales de desarrollo web en la web.

Filed under: Css, Tutoriales por admin