followers 44 popularity
22
following 9
Groups
mahcih is not in any groups

Interests

salut
j'aime le web et j'aime travailler dans le web faire des sites
individuelle qualifie analytics
avec google adsense
google adwords
faire des compagnes de pub pour des sites via google adwords
creation des banniers de pub des videos pirater ou copier les mots clés pour des sites copier coller des sites
..............
Hichamwildweb | mahcih
comment:creation site de A-Z+votre site et le (SEO)+votre code google webmaster astuces copier coller un site photo tous ce qui bouge dans le web+a venir des astuces google annalytics+adsense+adwords
unknown

Galerie d'images CSS3 Hover

Jul 27th 2011 at 10:26 AM

Galerie d'images CSS3 Hover

Une galerie d'image élégante qui tire parti de CSS3 animation, des ombres, et les « transformer »la propriété d'ajouter instantanément un effet lisse planent à ses images, par lequel l'élargissement de l'image et se rapproche de l'utilisateur.

L'effet hover fonctionne mieux actuellement dans Google Chrome, Safari 4 + et Opera 9.5 +. Dans FF 3.6, l'animation CSS est ignorée, alors que dans IE, tout l'effet n'est pas visible. /*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */ Le code css <style type="text/css"> .hovergallery img{ -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/ -moz-transform:scale(0.8); /*Mozilla scale version*/ -o-transform:scale(0.8); /*Opera scale version*/ -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla duration version*/ -o-transition-duration: 0.5s; /*Opera duration version*/ opacity: 0.7; /*initial opacity of images*/ margin: 0 10px 5px 0; /*margin between images*/ } .hovergallery img:hover{ -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform:scale(1.1); /*Mozilla scale version*/ -o-transform:scale(1.1); /*Opera scale version*/ box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ opacity: 1; } </style> Le code html <div class="hovergallery"> <img src="votre lien de l'image ici-http://2.bp.blogspot.com/-QqoYGs-Tapo/TheR54UOE-I/AAAAAAAAARA/v_w-AVLa7kM/s200/BCute.JPG" /> <img src="http://4.bp.blogspot.com/-LPi8PA0MOAo/TheWaMpqdaI/AAAAAAAAARI/Ybv7XznRpSs/s200/BeMagazine.JPG" /> <img src="http://3.bp.blogspot.com/-lewBZ7dRaDg/TheWaVe1r0I/AAAAAAAAARM/1sjhdNKSo1Y/s200/Christmas-V2.JPG" /> <img src="http://4.bp.blogspot.com/-hF7ITh0YdA4/TheWbWT95DI/AAAAAAAAARY/3JR4yPBYKJ8/s200/Echo-History.JPG" /> <img src="http://4.bp.blogspot.com/-94QFyD_pm-Q/TheWapH1dMI/AAAAAAAAARQ/_eujFtD2h2c/s200/coldblue.jpg" /> <img src="http://2.bp.blogspot.com/-H3qtHMgn9ds/TheWcbBVHtI/AAAAAAAAARg/JP_Oju4TxHk/s200/Graffiti-Art.JPG" /> </div>
0 comments
Please to comment

sign in

Username
Password
Remember Me


New to IM faceplate? join free!

Lost Password? click here