Zoom out image hover effect using CSS

In HTML&CSS  |  Last Updated on Sat, 07 May 2016

This post is about Zoom out image hover effect using CSS. This is very cool effect. And we all know hover effect mainly use for attractive of a web page. It is very easy to implement of your website. And this is very simple , basic and easy tutorial. So lets start..
   

HTML Code

<h2 id="demo03">Zoom Out</h2>
    <div class="hover03 column">
        <div>
            <figure><img src="img/pic01.jpg" /></figure>
            <span>Your Title</span>
        </div>
        <div>
            <figure><img src="img/pic02.jpg" /></figure>
            <span>Your Title</span>
        </div>
        <div>
            <figure><img src="img/pic03.jpg" /></figure>
            <span>Your Title</span>
        </div>
    </div>

 

CSS Code

@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 */

.hover03 figure img {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover03 figure:hover img {
    -webkit-transform: scale(1);
    transform: scale(1);
}