HTML File
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="gallery">
<img alt="" src="img/nature1.jpg" />
<img alt="" src="img/nature2.jpg" />
<img alt="" src="img/nature3.jpg" />
<img alt="" src="img/nature4.jpg" />
<img alt="" src="img/nature5.jpg" />
<img alt="" src="img/nature6.jpg" />
<img alt="" src="img/nature7.jpg" />
<img alt="" src="img/nature8.jpg" />
</div>
</body>
</html>
CSS File
#gallery {
text-align: center;
width: 610px;
margin: 70px auto;
}
#gallery img {
width: 300px;
-webkit-transition-duration: 0.6s; /*Webkit: animation duration*/
-moz-transition-duration: 0.6s; /*Mozilla: animation duration*/
-o-transition-duration: 0.6s; /*Opera: animation duration*/
opacity: 0.6; /*initial opacity of the image*/
z-index: 1; /*place non-hover images behind the hover image*/
margin: 0; /*remove default margin for images*/
position: relative; /*solve the problem with z-index in Chrome*/
}
#gallery img:hover {
-webkit-transform: scale( 1.5 ); /*Webkit: increase size to 1.5x*/
-moz-transform: scale( 1.5 ); /*Mozilla: scaling*/
-o-transform: scale( 1.5 ); /*Opera: scaling*/
box-shadow: 0px 0px 25px gray; /*CSS3 shadows: 25px fuzzy shadow around the entire image*/
-webkit-box-shadow: 0px 0px 25px gray; /*Webkit: shadows*/
-moz-box-shadow: 0px 0px 25px gray; /*Mozilla: shadows*/
opacity: 1; /*default opacity*/
z-index: 10; /*place hover image in front the non-hover images*/
}
Example Download....!
No comments: