CODEWITHSUNDEEP
css
Nick Div
Nick Div

Reputation: 5628

How to make a img flicker using css(should work in all browsers)

.name{
  width: 10px;
  height: 10px;
  -webkit-transition:opacity 2s; /* For Safari 3.1 to 6.0 */
  transition:opacity 2s;

}

.students img:hover{
  width: 10px;
  height: 10px;
  opacity: 0.5;
}

Right now I am able to change the opacity on the hover but I want the image to flicker i.e. the opacity should go to 0 then come back to 1 then again go to 0 and come back to 1 like flickering. Hope I was able explain my problem

Any help would be appreciated.

Thanks in advance.

Upvotes: 1

Views: 804

Answers (1)

Crabman
Crabman

Reputation: 73

I'm suggesting to use jQuery or simple javascript for that purpose. For example:

$(function () 
{
    flicker();
    function flicker () 
    {           
        $('#test').fadeIn(100, function ()
        {
            $('#test').fadeOut(150, function () 
            {                    
               setTimeout(flicker, 50);               
            });
        });
    }

});

live demo

You can set the speed of the flickering by modifying the first parameter of fadeIn, fadeOut function and the second one of the setTimeout. Please note they are in milliseconds.

EDIT

I've found the how to do this with CSS3 only. Here is the live demo

Upvotes: 1

Related Questions