Il ya quelques jours j'ai été mise en œuvre Image Rollover Effect dans un site que je travaille. La plupart des sites de portefeuille sont avec effet de survol de l'image. Dans ce tutoriel, je vous apprendre à créer simple effet de survol Css image. Je suis en utilisant un seul graphique simple. Le reste est à la base de style CSS, avec un code HTML simple.

Cette propriété border arrondi n'est pas pris en charge par IE. Voir la démo

nous faire connaître vos pensées? Si vous avez trouvé aucun autre exercice que vous souhaitez partager avec nous, n'hésitez pas à nous le faire savoir en laissant tomber dans un commentaire.

Exemple:

Étape # 1 Structure Css

D'abord nous créons un simple code Css

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


  . Rollover_img (
 ; largeur: 280px;
 ; Hauteur: 150px;
 ( land .jpg ) ; background-image: url (terres jpg.); 
 ; background-position: top;
 -Moz-border-radius: 10px;
 -Webkit-border-radius: 10px;
 #ccc ; border: 10px solid # ccc;
 Arial, Helvetica, sans-serif ; police: 13px normale Arial, Helvetica, sans-serif;
 line-height: 18px;
 float: left;
 0 ; margin: 0 10px 10px 0;
 ) 


  color : #fff ; width : 280px ; height : 150px ; display : block ; text-decoration : none ; } . Rollover_img a (color: # FFF; largeur: 280px; height: 150px; display: block; text-decoration: none;) 
  { background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } . Rollover_img a: hover (background: # 000; opacité::. 60; filtre alpha (opacity = 60);) 
 display : none ; width : 280px ; padding : 5px ; } . Rollover_img une durée de (display: none; largeur: 280px; padding: 5px;) 
  span { display : block ; } . Rollover_img a: hover span (display: block;) 

Étape # 2 Structure Html

maintenant nous allons créer un simple ligne de 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 Inforoute Inde" href = "http://blog.aceinfowayindia.com"> <span> Lorem ipsum dolor sit amet, adipiscing elit consectetur.  Sed condimentum.  En volutpat.  Vestibule elit.  eget Aenean enim vitae tellus bibendum pellentesque.  Sed au texte Exemple est., Lorem ipsum dolor sit amet, adipiscing elit consectetur. </ Span> </ a> </ div> 

Voir la démo

Suivez-nous sur Twitter ou abonnez-vous à la Développeurs Paradise + flux RSS pour les meilleurs tutoriaux de développement web sur le web.

Classé sous: Css , Tutoriels par admin