Image Hover Effects with CSS3

.view { width: 300px; height: 200px; margin: 10px; float: left; border: 10px solid #fff; overflow: hidden; position: relative;
text-align: center; -webkit-box-shadow: 1px 1px 2px #e6e6e6; -moz-box-shadow: 1px 1px 2px #e6e6e6; box-shadow: 1px 1px 2px #e6e6e6;
cursor: default; background: #fff url(../images/bgimg.jpg) no-repeat center center; }
.view .mask,.view .content { width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0; }
.view img { display: block; position: relative; }
.view h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; padding: 10px; background:#06C;
margin: 20px 0 0 0; }
.view p { font-family: Georgia, serif; font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: center; }
.view a.info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #06C; color: #fff; text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000; -moz-box-shadow: 0 0 1px #000; box-shadow: 0 0 1px #000; }
.view a.info: hover { -webkit-box-shadow: 0 0 5px #000; -moz-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000; }
.view-first img { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear; transition: all 0.2s linear; }
.view-first .mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0;
background-color: rgba(19,17,88, 0.7); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.view-first h2 { -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -o-transform: translateY(-100px);
-ms-transform: translateY(-100px); transform: translateY(-100px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.view-first p { -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -o-transform: translateY(100px);
-ms-transform: translateY(100px); transform: translateY(100px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; }
.view-first:hover img { -webkit-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1); transform: scale(1.1,1.1); }
.view-first a.info { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0;
-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.view-first:hover .mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; }
.view-first:hover h2, .view-first:hover p, .view-first:hover a.info { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100); opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px);
-ms-transform: translateY(0px); transform: translateY(0px); }
.view-first:hover p { -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s;
transition-delay: 0.1s; }
.view-first:hover a.info { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s; transition-delay: 0.2s; }

<div class="view view-first"><img src="images/kumar.jpg" />
<div class="mask"><h2>Muthu joo 1</h2>
<p>People say, Find good people & leave bad ones but it should be, Find the good in people & ignore the bad in them.</p>
</div>
</div>
<div class="view view-first">
<img src="images/muthu.jpg" />
<div class="mask">
<h2>Muthu joo 2</h2>
<p>People say, Find good people & leave bad ones but it should be, Find the good in people & ignore the bad in them.</p>
</div>
</div>

Tagged in:

• image hover effect
• hover effect css
• Photo gallery css
• css photo gallery