javascript - transition of image to another image on hover

I want transition of image to another image when hover. But after using the following code the size of the image is more than the page and when hover the image disappears and no other image can be seen.

HTML

<html>
    <head>
     <title></title>
     </head>
    <body>
      <div id="cssfade">
       <img src="image1.jpg" height:200px;width:300px;/>
       </div>
    </body>
</html>

CSS

#cssfade { 
    background-image: url('image2.jpg');
    height:200px; 
    width: 300px;
}
#cssfade img {
    -webkit-transition: all ease 1s;
    -moz-transition: all ease 1s;
    -o-transition: all ease 1s;
    -ms-transition: all ease 1s;
    transition: all ease 1s;
}
#cssfade img:hover {
    opacity:0;
}

HTML

<html>
    <head>
     <title></title>
     </head>
    <body>
      <div id="cssfade">
       <img src="image1.jpg" height:200px;width:300px;/>
       </div>
    </body>
</html>

CSS

#cssfade { 
    background-image: url('image2.jpg');
    height:200px; 
    width: 300px;
}
#cssfade img {
    -webkit-transition: all ease 1s;
    -moz-transition: all ease 1s;
    -o-transition: all ease 1s;
    -ms-transition: all ease 1s;
    transition: all ease 1s;
}
#cssfade img:hover {
    opacity:0;
}

Share Improve this question edited Sep 15, 2015 at 9:03 Mukul Kant 7,1225 gold badges43 silver badges56 bronze badges asked Sep 15, 2015 at 8:54 Priyanka Maurya 4433 gold badges7 silver badges18 bronze badges

1 I would suggest putting one image over the other (if as a background image, one div on top of other) and on hover change opacity, than there won't be gliching/white flashing between. – Kristine Commented Sep 15, 2015 at 8:59
Take a look: jsfiddle/es_kaija/ox6v7g6m/1 – Kristine Commented Sep 15, 2015 at 9:10

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

I'm assuming the image in the div is content so I have left it there and merely moved the hover to take effect when the wrapping div is hovered.

#cssfade {
  width: 300px;
  height: 200px;
  background-image: url(http://lorempixel./300/200/sports/2/);
}
#cssfade img {
  width: 300px;
  height: 200px;
  display: block;
  transition: opacity 1s ease;
}
#cssfade:hover img {
  opacity: 0;
}

<div id="cssfade">
  <img src="http://lorempixel./300/200/sports/1/" alt="">
</div>

EDIT - Just to clarify the difference to Tushar's answer, the transitions should be on #cssfade rather than #cssfade:hover to ensure the transition applies when hovering and un-hovering.

HTML:

<html>
  <head>
    <title>...</title>
  </head>
  <body>
    <div id="cssfade"></div>
  </body>
</html>

CSS:

#cssfade { 
  height:200px; 
  width: 300px;
  background-image: url('image1.jpg') no-repeat;
  -webkit-transition: all ease 1s;
  -moz-transition: all ease 1s;
  -o-transition: all ease 1s;
  -ms-transition: all ease 1s;
  transition: all ease 1s;
}

#cssfade:hover {
  background-image: url('image2.jpg') no-repeat;
}

Use background-image on div.

On hover change the background-image.

Transition:

MDN CSS Tricks

Demo

#cssfade {
  background-image: url('http://lorempixel./400/200');
  height: 200px;
  width: 300px;
}
#cssfade:hover {
  -webkit-transition: all ease 1s;
  -moz-transition: all ease 1s;
  -o-transition: all ease 1s;
  -ms-transition: all ease 1s;
  transition: all ease 1s;
  background-image: url('http://lorempixel./400/200/sports/1');
}

<div id="cssfade"></div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - transition of image to another image on hover - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)