Uns días eu estaba implementando Efecto Rollover de imaxe en un sitio que eu estou a traballar. A maioría dos sitios de carteira están empregando efecto de superposición de imaxes. Neste tutorial i vai aprender como crear CSS simple efecto de superposición de imaxes. Eu estou usando só un gráfico sinxelo. O resto é básico estilo CSS, con código HTML sinxelo.

Esta propiedade fronteira Rounded non é soportada polo IE. Ver Demo

déixenos saber os seus pensamentos? Se atopou algún outros tutoriais que quere compartir connosco, Sinto-se libre para nos informar por caer en un comentario.

Exemplo:

Etapa # 1 CSS Estrutura

Primeiro imos crear un simple código Css

 ; margin : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; } * (Padding: 0; margin: 0;) body (font: normal 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 (terra.es jpg); background-position: top;-moz-border-RADIUS: 10px;-webkit-border-RADIUS: 10px; border: 10px solid # CCC; font: normal 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; Opacidade: 60.; Filtros: Opacidade alfa (= 60);) 
 display : none ; width : 280px ; padding : 5px ; } . Rollover_img a a (display: none; width: 280px; padding: 5px;) 
  span { display : block ; } . Rollover_img a: hover p (display: block;) 

Etapa # 2 Estrutura Html

Agora, 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.  Sed condimentum.  In volutpat.  Vestibulum elit.  Aenean bibendum vitae enim eget tellus pellentesque.  Sed at est exemplo o texto Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ Span> </ a> </ div> 

Ver Demo

Siga connosco no Twitter, ou Suscríbete o Paraíso Developers + RSS Feed para os cursos de desenvolvemento web mellor na web.

Arquivo en: Css, Tutoriais por admin