Like Us on Facebook

Simple image hover effect using CSS

This post is about No 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 understand and implement of your website. And this is very simple , basic and easy tutorial. So lets start...
 
                                                                         
 


HTML Code

<h2>No Effect</h2>
    
    <div class="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;

}

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.