Een paar dagen geleden was ik de uitvoering Image Rollover Effect in een website waar ik aan werk. Merendeel van de portefeuille websites zijn het gebruik van image rollover-effect. In deze tutorial zal ik u leren hoe u eenvoudige CSS beeld rollover effect. Ik gebruik slechts een eenvoudige afbeelding. De rest is fundamenteel CSS styling, met eenvoudige HTML-code.

Deze Afgeronde grens eigenschap wordt niet ondersteund door IE. Demo bekijken

Laat ons weten wat uw gedachten? Als u andere tutorials die je wilt delen met ons gevonden, voel je vrij om ons te laten weten door te laten vallen in een commentaar.

Voorbeeld:

Stap # 1 CSS Structuur

eerste maken we een eenvoudige CSS-code

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


  . rollover_img (
 ; width: 280px;
 ; height: 150px;
 ( land .jpg ) ; background-image: url (land. jpg); 
 ; background-position: top;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 #ccc ; border: 10px solid # ccc;
 Arial, Helvetica, sans-serif ; font: 13px normale Arial, Helvetica, sans-serif;
 line-height: 18px;
 float: left;
 0 ; margin: 0 10px 10px 0;
 ) 


  . rollover_img a (
 ; color: # fff;
 ; width: 280px;
 ; height: 150px;
 ; display: block;
 ; text-decoration: none;
 ) 


  { . rollover_img a: hover (
 ; background: # 000;
 opacity:. 60;
 opacity= 60 ) ; filter: alpha (opacity = 60);
 ) 


 display : none ; width : 280px ; padding : 5px ; } . rollover_img een span (display: none; width: 280px; padding: 5px;) 
  span { display : block ; } . rollover_img a: hover span (display: block;) 

Stap # 2 Html Structuur

Nu maken we een eenvoudige HTML-code

  > <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <div class = "rollover_img"> <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com">
 <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Sed 
 condimentum.  In volutpat.  Vestibulum elit.  Aenean eget enim vitae 
 pellentesque bibendum tellus.  Sed at est Voorbeeld Tekst, Lorem ipsum 
 dolor sit amet, consectetur adipiscing elit. </ span>
 </ a> </ div> 

Demo bekijken

Volg ons op Twitter, of zich abonneren op de Developers Paradise + RSS-feed voor de beste tutorials web development op het web.

Geplaatst onder: Css, Tutorials door admin