استایل زیبا برای هاور بر تصاویر - CSS Image Hover ( نمونه 4)

<h2 id="demo04">4. Zoom Out #2</h2>

<div class="hover04 column">

<div>

<figure><img src="pic01.jpg" /></figure>

<span>Hover</span>

</div>

<div>

<figure><img src="pic02.jpg" /></figure>

<span>Hover</span>

</div>

<div>

<figure><img src="pic03.jpg" /></figure>

<span>Hover</span>

</div>

</div>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

body {

color: #333;

font-family: 'Open Sans', sans-serif;

font-weight: 300;

}

h1,

h1+p {

margin: 30px 15px 0;

font-weight: 300;

}

h1+p a {

color: #333;

}

h1+p a:hover {

text-decoration: none;

}

h2 {

margin: 60px 15px 0;

padding: 0;

font-weight: 300;

}

h2 span {

margin-left: 1em;

color: #aaa;

font-size: 85%;

}

.column {

margin: 15px 15px 0;

padding: 0;

}

.column:last-child {

padding-bottom: 60px;

}

.column::after {

content: '';

clear: both;

display: block;

}

.column div {

position: relative;

float: left;

width: 300px;

height: 200px;

margin: 0 0 0 25px;

padding: 0;

}

.column div:first-child {

margin-left: 0;

}

.column div span {

position: absolute;

bottom: -20px;

left: 0;

z-index: -1;

display: block;

width: 300px;

margin: 0;

padding: 0;

color: #444;

font-size: 18px;

text-decoration: none;

text-align: center;

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

opacity: 0;

}

figure {

width: 300px;

height: 200px;

margin: 0;

padding: 0;

background: #fff;

overflow: hidden;

}

figure:hover+span {

bottom: -36px;

opacity: 1;

}

/* Zoom Out #2 */

.hover04 figure img {

width: 400px;

height: auto;

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

}

.hover04 figure:hover img {

width: 300px;

}