Like Us on Facebook

Blur image hover effect using CSS

This post is about Blur 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="demo07">Blur Effect</h2>
    <div class="hover07 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;

}


/* Blur */
.hover07 figure img {
    
-webkit-filter: blur(3px);
    filter: blur(3px);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;

}
.hover07 figure:hover img {
  
 -webkit-filter: blur(0);
    filter: blur(0);

}

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.