Search code examples
htmlcsshoverpseudo-class

Replace one image with another using hover

I have this code

<div class="mix category-1">

<a href="img/holder-01-large.png" class="photo">

<img src="img/holder-01-small.png alt="Ram - Srbija" class="img-small-1"></a>

<a href="img/slider-photo-1.jpg" target="_blank" class="techdraw">Primer montaze</a>

<a class="popup-youtube" href="https://www.youtube.com/watch?v=dz1kDQEHJaU">Video primer</a>

</div>

I want to replace this holder-01-small.png when hover over it with image with same dimensions. Is that possible by not touching this HTML code, just using CSS?

Solution

  • It's possibly using this HTML, yes. (As long as you insert the missing quote after the src, that is!)

    a.photo:hover img {
  display: none
}
a.photo:hover::after {
  content: url(http://lorempixel.com/100/100);
}
    <div class="mix category-1">

  <a href="img/holder-01-large.png" class="photo">

    <img src="http://lorempixel.com/g/100/100" alt="Ram - Srbija" class="img-small-1" />

  </a>

  <a href="img/slider-photo-1.jpg" target="_blank" class="techdraw">Primer montaze</a>

  <a class="popup-youtube" href="https://www.youtube.com/watch?v=dz1kDQEHJaU">Video primer</a>

</div>

    Note that I changed the HTML to point to another image on the web in order to show something here in the snippet; hope you don't consider that to be cheating!