Changing image when mouse is hover over div

Question

I can change a image when the mouse is hovered over it but how do I change the image when the mouse is hovered over the layer/div?

<div id="layerservicewebsite">
    <a href="website%20design.html">
        <br>
        <img src="Images/symbol%20web%20design2.jpg" onmouseover="this.src='Images/symbol%20web%20design.jpg'" onmouseout="this.src='Images/symbol%20web%20design2.jpg'" width="200" height="200"> </a>
    <h2>WEBSITE DESIGN</h2>

Possible duplicate: http://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html and this http://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover — Jonathan Newton, Jan 03 '17 at 15:46

score 0 · Answer 1 · answered Jan 03 '17 at 15:53

You can use the following CSS for that:

#layerservicewebsite:hover img {
    background-image: url('image.png');
}

Snippet below:

#layerservicewebsite:hover img {
  background-image: url('https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300×300&w=300&h=300&fm=png');
}
#layerservicewebsite {
  border: 1px solid lightgray;
}

<div id="layerservicewebsite">
  <a href="website%20design.html">
    <img src="Images/symbol%20web%20design2.jpg" onmouseover="this.src='Images/symbol%20web%20design.jpg'" onmouseout="this.src='Images/symbol%20web%20design2.jpg'" width="200" height="200">
  </a>
  <h2>WEBSITE DESIGN</h2>
</div>

allnodcoms · Accepted Answer · 2017-01-03T16:01:47.313

I would create 2 images and give one a class. Then create a CSS rule for your parent div which makes the default image transparent on hover. This has the advantage of being able to transition the two images, fading them in and out.

First, define a class rule for a general image:

#layerservicewebsite > img {
position: absolute;
display: block;
opacity: 1;
transition: opacity 1s ease;
/* set your left, top, width, height etc here... */
}

Then give the image that you want to disappear some class - canHide for example.

Then:

#layerservicewebsite:hover > img.canHide {
opacity: 0;
}

score 0 · Answer 3 · answered Jan 03 '17 at 15:56

A solution without javascript:

.layer {
  padding: 50px;
  background: #eee;
}
.layer img:last-child {
  display: none;
}
.layer:hover img {
  display: none;
}
.layer:hover img:last-child {
  display: inline-block;
}

<div class="layer">
  <a href="#">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%20One&w=350&h=150" alt="">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%20Two&w=350&h=150" alt="">
  </a>
  <h2>WEBSITE DESIGN</h2>
</div>

Changing image when mouse is hover over div

3 Answers3