Like Us on Facebook

Flashing image hover effect using CSS

This post is about Flashing 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="demo13">Flashing effect</h2>
    <div class="hover13 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;

}

/* Flashing */
.hover13 figure:hover img {
  
 opacity: 1;
    -webkit-animation: flash 1.5s;
    animation: flash 1.5s;

}
@-webkit-keyframes flash {
    0% {
      
 opacity: .4;
    }
    100% {
      
 opacity: 1;
    }
}
@keyframes flash {
    0% {
        
opacity: .4;
    }
    100% {
        
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.