CODEWITHSUNDEEP
htmlcss
Imnotapotato
Imnotapotato

Reputation: 5808

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..)

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

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;
}

EDIT:

here's a fiddle! http://jsfiddle.net/6kdvsthx/

Upvotes: 0

Views: 660

Answers (2)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

I believe that jQuery would give you a better simpler solution, but if you want CSS only, you could define keyframes for each image, and loop that in an animation:

.mobile-link img {
    position: absolute;
    opacity: 0;
}
.mobile-link img:first-child {
    opacity: 1;
}
.mobile-link:hover .mobile0 { animation: m0 5s; }
.mobile-link:hover .mobile1 { animation: m1 5s; }
.mobile-link:hover .mobile2 { animation: m2 5s; }
.mobile-link:hover .mobile3 { animation: m3 5s; }
.mobile-link:hover .mobile4 { animation: m4 5s; }

@keyframes m0 {
    0% { opacity: 1; }
    25% { opacity: 0; }
    50% { opacity: 0; }
    75% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes m1 {
    0% { opacity: 0; }
    25% { opacity: 1; }
    50% { opacity: 0; }
    75% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes m2 {
    0% { opacity: 0; }
    25% { opacity: 0; }
    50% { opacity: 1; }
    75% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes m3 {
    0% { opacity: 0; }
    25% { opacity: 0; }
    50% { opacity: 0; }
    75% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes m4 {
    0% { opacity: 0; }
    25% { opacity: 0; }
    50% { opacity: 0; }
    75% { opacity: 0; }
    100% { opacity: 1; }
}
<a href="<?php echo get_page_link(6); ?>" class="mobile-link">
  <img src="https://s-media-cache-ak0.pinimg.com/736x/d7/35/57/d73557a127ec6c453e54373d428964ca.jpg" class="mobile0 animated swing" />
  <img src="http://img4.wikia.nocookie.net/__cb20110726083017/spongebob/images/thumb/6/6f/Squidward_gets_angry.png/320px-Squidward_gets_angry.png" class="animated swing mobile1" />
  <img src="https://s-media-cache-ak0.pinimg.com/736x/6b/d4/25/6bd4259161a192423c454b8f4ab44e71.jpg" class="animated swing mobile2" />
  <img src="http://4.bp.blogspot.com/-8xBn9yEJwmA/T0pWr2az2mI/AAAAAAAABsc/ZfNT9R1WhEw/s320/funny_pictures_kitten_fell_off_chair_Funny_cats_and_dogs_pics-s450x329-49242-580.jpg" class="animated swing mobile3" />
  <img src="http://www.theblaze.com/wp-content/uploads/2012/04/photo-1.jpg" class="animated swing mobile4" />
</a>

Note: don't forget to use the browser prefixes on the animation!

Upvotes: 1

Lokesh Suthar
Lokesh Suthar

Reputation: 3202

Okay so I have got a probable solution, the catch is, you won't be able to use img tags. You can use images as background-image and animate background on :hover

NOTE: Fade in effect can be removed by playing with animation.

HTML

<div class="image-box"></div>

CSS

.image-box {
  height: 200px;
  width: 300px;
  background-color: #eee;
  background-image: url("https://s-media-cache-ak0.pinimg.com/736x/d7/35/57/d73557a127ec6c453e54373d428964ca.jpg");
  background-size: contain;
  background-repeat: no-repeat;
}
.image-box:hover{
  -webkit-animation:imageRoll 10s infinite linear;
}

@-webkit-keyframes imageRoll{
  0% {
    background-image: Url("https://s-media-cache-ak0.pinimg.com/736x/d7/35/57/d73557a127ec6c453e54373d428964ca.jpg");
  }
  20% {
    background-image: Url("http://img4.wikia.nocookie.net/__cb20110726083017/spongebob/images/thumb/6/6f/Squidward_gets_angry.png/320px-Squidward_gets_angry.png");
  }
  40% {
    background-image: Url("https://s-media-cache-ak0.pinimg.com/736x/6b/d4/25/6bd4259161a192423c454b8f4ab44e71.jpg");
  }
  60% {
    background-image: Url("http://4.bp.blogspot.com/-8xBn9yEJwmA/T0pWr2az2mI/AAAAAAAABsc/ZfNT9R1WhEw/s320/funny_pictures_kitten_fell_off_chair_Funny_cats_and_dogs_pics-s450x329-49242-580.jpg");
  }
  80% {
    background-image: Url("http://www.theblaze.com/wp-content/uploads/2012/04/photo-1.jpg");
  }
}

JSFIDDLE

Upvotes: 1

Related Questions