Create a Flash Effect on Images on Hover Using CSS3

Creating animation with CSS3 is simple to implement and requires fewer lines of code. It helps you to create simple and even complex animations. The best part about CSS3 animations is the smoothness and running without any glitches if implemented properly. Images are an integral part of any web application and with the help of CSS, eye-catching animations can be implemented on the images. This short post talks about creating a flash like effect on an image on hover event using CSS3.

HTML Markup

Let’s start off by creating the HTML markup. Define three image tags decorated with CSS class called “flash”. For the purposes of this demo, the images used are taken from FreeImages.

<h1> Hover for flash effect </h1>
 <img class="flash" src="http://images.freeimages.com/images/large-previews/389/mitze-1380778.jpg" />
<br/>
 <img class="flash" src="http://images.freeimages.com/images/large-previews/72c/fox-1522156.jpg" />
<br/>
 <img class="flash" src="http://images.freeimages.com/images/large-previews/c23/hello-3-1564990.jpg" />

CSS

Creating a flash effect is very simple, and all that is required is to manipulate the opacity of the element at different stages to form a flash effect. To manipulate the opacity at different stages we can leverage CSS3’s @keyframe rule. The @keyframes rule specifies the animation code and the animation is created by gradually changing from one set of CSS styles to another. We can define the start and end of the animation in percentages. 0% is the beginning of the animation, 100% is when the animation is complete. So you may define any number between 0% and 100% to apply different CSS styles.

First, define the @keyframe rule named “flash”. Inside it, change the opacity to 0.3 at the beginning of the animation (which is 0%) and then reset it to 1 at 100%. Like:

@-webkit-keyframes flash {
 0% { opacity: .3; }
 100% { opacity: 1; }
}
@keyframes flash {
 0% { opacity: .3; }
 100% { opacity: 1; }
}

We already applied the “flash” CSS class to all the images. So, on hover event on the images, call the @keyframe animation. Like:

.flash:hover {
 opacity: 1;
 -webkit-animation: flash 1s;
 animation: flash 1s;
}

Here, the duration to complete the animation is set to 1 second. You can check out a working demo here. This is a very simple implementation of creating a flash-like effect. You can make it more fancy and fast via changing the opacity at different percentages. Such as:

@-webkit-keyframes flash {
 0%, 50%, 100% { opacity: 1; }
 25%, 75% { opacity: 0; }
}
@keyframes flash {
 0%, 50%, 100% { opacity: 1; }
 25%, 75% { opacity: 0; }
}

As you can see, opacity value is changed from 0 to 1 at 5 intervals to create a more fast flashing effect. You can check out a working demo here.

Conclusion

To conclude, CSS3’s @keyframe rule helps to create different styles of animation as it allows to apply different sets of CSS styles at various intervals. In this post, we’ve just learned how to create flash-like effects on images using CSS3. You can change the animation to whatever suits your needs!

Short Intro of jQuery Inbuilt Methods for Handling CSS

Manipulating the UI style or CSS at runtime is a very common project. With plain JavaScript, adding and removing CSS classes or inline stylings of the matched element can be tricky. Luckily, jQuery has some inbuilt methods to make this whole process effortless! The methods are .addClass(), .removeClass(), .hasClass(), .toggleClass() and .css(). The names of […]

Read on...

Apply Cool Linear and Radial Gradients Using CSS

Gradient backgrounds are nice ways of displaying smooth transitions between two or more colors. Instead of relying on a graphic design software like Photoshop to create these effects, you can use simple CSS3 linear and radial gradients to create cool designs. Apart from saving money on an expensive graphics software package, another great advantage of using […]

Read on...

15 Awesome CSS3-based Loading Animations

What are CSS3 Animations? CSS3 animations are quite powerful and many unimaginable animations can be created using CSS3. With a little knowledge of CSS3 one can create simple animations, and an in-depth knowledge of CSS3 can open doors for creating some really complex animations. We are all quite familiar with the loader shown on any […]

Read on...

Make Beautiful Hyperlinks Using CSS

A beautiful website design addresses every single aspect and element of the website, whether big or small. Small animations and beautifully designed elements can immensely improve the overall user experience and can take the whole design to a new level. Hyperlinks – or anchor tags – are an important element in any website and it’s […]

Read on...

The Very Best 4 (Active) CSS Lint Tools

Introduction Linting tools help improve the code quality and optimize it for better performance. Linting tools have sets of defined rules to verify the code, without actually executing the code. Web designers often overlook the CSS code quality and unstructured coding style. As the product grows, this can create a real mess and usually results […]

Read on...

Implement a Blur or Filter Effect on an Image Using CSS3

It’s very common to have different hover effects on HTML elements, especially on images. The power of CSS3 and modern browsers have made this easy to achieve. CSS3 filters are a powerful property to apply filters to images, just like photoshop filters. The filter CSS property lets you apply graphical effects like blurring, sharpening, or […]

Read on...

12 Awesome CSS Frameworks For Your Next Project

CSS (Cascading Style Sheet) is one of the most important tools in any website designers toolkit. In fact, without CSS, website design simply can’t function. Website designing has gone through massive changes over time, and HTML and CSS have come a long way. With the introduction of HTML 5 and CSS 3, website design has […]

Read on...

CSS Tool tips (Infotips) to Support Your Website Visitors

tooltip hover example

Tool tips are messages that appear when you hover your cursor over a word, hyperlink, image, icon, or any other element in a graphical user interface (GUI) or website. Also called an “infotip” and sometimes written as “tooltip”, these useful messages appear in a hover box, usually to describe the feature your mouse is hovering […]

Read on...

Create Responsive Navigation Bars for Desktop and Mobile Websites

Responsive Menus

With minimalist side design still on the rise, it’s sometimes easy for website visitors to get confused. Navigating a website should be easy and intuitive, and is one of the most important elements of a website. Using CSS, you can turn simple HTML menus into dynamic and aesthetically pleasing navigation bars. Responsive Design As the […]

Read on...