Apply Flash Effect on Images with Pure CSS

By Focusoncode September 22, 2018

Animation with css have become very important on web developing. They can be implemented with a few lines of codes and they run smoothly, if integrated properly. You can choose css for simple and complex animations, without increasing the load time of your website.

In this article we will demonstrate how to apply flash effect over images using css only. Below you an find a demo and download link.

DEMO  DOWNLOAD

Firstly lets create a html file with an image attribute inside it.

HTML CODE


<!DOCTYPE html>
<html>
<head>
<title>Flash effect on images with css</title>
</head>
<body>
<div class="imgwrap">
<img src="img/1.jpg">
</div>
</body>
</html>

CSS

To create a flash effect animation with css, you have to manipulate the opacity of image on different stages. This can be done by using css3 @keyframe rule. @keyframes rule specifies the animation code.

The animation is created by gradually changing from one set of CSS styles to another. You specify when the the style will change in percent, or with “from” and “to”, which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

Let’s look at our example:


@-webkit-keyframes flash {
0% { opacity: .3; }
100% { opacity: 1; }
}
@keyframes flash {
0% { opacity: .3; }
100% { opacity: 1; }
}
.imgwrap img:hover {
opacity: 1;
-webkit-animation: flash 1s;
animation: flash 1s;
}

The flash animation will happen in 1 second. With the @keyframes we specified that at the begining of animation the opacity of image will be 0.3 and in the end of animation the opacity will be 1. This change in opacity will make image flash on hover.

Leave a Comment

Your email address will not be published.