Tuesday, January 11, 2011

Zoom Post Images on mouse hover

Demo page: http://www.odessa.rr.nu/

Add to css:

.post img{
-webkit-transform:scale(1.0); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(1.0); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(1.0); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
/*opacity: 0.5;*/
margin: 0 10px 5px 0;
}
.post img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

1 comment:

English France German Spain Italy Dutch Russia Brasil Japan Korea Arabic China