Like Us on Facebook

Zoom out image hover effect using CSS

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);

}
 

Posted By UandBlog

UandBlog is a Global Leading source of Finance, Health, Lifestyle, Technology, Gaming and Programing and other information, it is a fastest growing blog for all , for latest post or information like us on facebook , follow on Twitter, Google+ and Pinterest.

Comments ( 0 )

    Leave a comment..

    Click to login.