How can I change image on hover? [closed]-CodePudding

Closed. This question needs

CodePudding user response：

Check the below snippet.

I created the expected behaviour just using CSS background-image property.

span {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-image: url('https://cdn.icon-icons.com/icons2/2428/PNG/512/linkedin_black_logo_icon_147114.png');
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}

span:hover {
  background-image: url('https://cliply.co/wp-content/uploads/2021/02/372102050_LINKEDIN_ICON_TRANSPARENT_400.gif')
}

<span>
</span>

CodePudding user response：

#image-wrapper{
width:200px;}
#image-wrapper img{
width:100%;}
#image-wrapper #img2{
  display:none;
}
#image-wrapper:hover #img2{
display:block;
}
#image-wrapper:hover #img1{
  display:none;
}

<div id="image-wrapper">
  <img id="img1" src="https://cdn3.vectorstock.com/i/1000x1000/60/67/example-rubber-stamp-vector-12386067.jpg"/>
  <img id="img2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnkERQA1c_N_g0BWD8BPWPY9zgq4lRDPu9cw&usqp=CAU" />
</div>

Page link：https//www.codepudding.com/frontend/144296.html

Prev:Material-ui makeStyles with both before and after

Next:Custom Div Shape CSS?

Tags：

css

mousehover

Links：
CodePudding