Vor ein paar Tagen war ich Umsetzung Image Rollover-Effekt in eine Webseite arbeite ich an. Die meisten der Portfolio-Webseiten sind mit Bild-Rollover-Effekt. In diesem Tutorial werde ich lernen, wie man einfache CSS-Rollover-Effekt zu erzeugen. Ich bin mit nur einer einfachen Grafik. Der Rest ist grundlegende CSS-Styling, mit einfachen HTML-Code.

Diese Runde Eigenschaft border ist nicht vom IE unterstützt. Demo anzeigen

teilen Sie uns Ihre Meinung? Wenn Sie andere Anleitungen, die Sie mit uns zu teilen gefunden, können Sie uns gerne wissen lassen, durch Fallenlassen in einem Kommentar.

Beispiel:

Schritt # 1 CSS-Struktur

Zuerst erstellen wir eine einfache CSS-Code

 ; margin : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; } * (Padding: 0; margin: 0;) body (font: 100% normalen 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 (Land. 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; opacity:. 60; filter: alpha (opacity = 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;) 

Schritt # 2 HTML-Struktur

Jetzt erstellen wir einen einfachen HTML-Code

 > <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <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 tellus bibendum pellentesque.  Sed in est Beispiel Text, Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ Span> </ a> </ div> 

Demo anzeigen

Folgen Sie uns auf Twitter, oder abonnieren Sie den Developers Paradise + RSS-Feed für die besten Web-Entwicklung Tutorials im Internet.

Abgelegt unter: CSS, Tutorials von admin