Apply Flash Effect on Images with Pure CSS

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.


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


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


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 reply