CSS :hover that shows more than one image

I have an icon on my website.

I want to change the icon to 4 different images when ever I hover over the first one. So I know how to switch between the regilar image to yellow0.png, but how do I continue to the next one (after half a second for say..)

HTML:

                <a href="<?php echo get_page_link(6); ?>" class="mobile-link">
                    <img src="<?php echo $themedir;?>/images/2.png" class="mobile-icon animated swing">
                    <img src="<?php echo $themedir;?>/images/yellow0.png" class="animated swing mobile0" >
                    <img src="<?php echo $themedir;?>/images/yellow1.png" class="animated swing mobile1" >
                    <img src="<?php echo $themedir;?>/images/yellow2.png" class="animated swing mobile2" >
                    <img src="<?php echo $themedir;?>/images/yellow3.png" class="animated swing mobile3" >

                </a>

CSS:

.mobile0{
    display: none;
}

.mobile1{
    display: none;
}

.mobile2{
    display: none;
}

.mobile3{
    display: none;
}

.mobile-link:hover .mobile-icon{
    display: none;
}

.mobile-link:hover .mobile0{
    display: block;
}

Hover –> hide 2.png –> show yellow0.png –> hide yellow0 –> show yellow1 –> hide yellow1 –> show yellow2 –> ect


Source: css3

Leave a Reply