JSFiddle - React, Tailwind, and code Playground

by Hastig Z

HTML

<div id="test">
  <div class="produkt">
    <h2>overskrift</h2>
    <img class="stortbillede" src="https://i.imgur.com/Wu4mf2zb.jpg">
    <div class="produkt_hidden">
      <p>Lorem ipsum dolor sit amet,</p>
      <div class="image-wrapper">
        <img class="lille_billede1 do_something" src="https://i.imgur.com/Wu4mf2zb.jpg"  alt="food">
        <img class="lille_billede2 do_something" src="https://i.imgur.com/NN36yEMb.jpg"  alt="food">
        <img class="lille_billede3 do_something" src="https://i.imgur.com/KDTD5wjb.jpg"  alt="food">
      </div>
    </div>
  </div>
  <div class="produkt">
    <h2>overskrift</h2>
    <img class="stortbillede" src="https://i.imgur.com/Wu4mf2zb.jpg">
    <div class="produkt_hidden">
      <p>Lorem ipsum dolor sit amet,</p>
      <div class="image-wrapper">
        <img class="lille_billede1 do_something" src="https://i.imgur.com/Wu4mf2zb.jpg"  alt="food">
        <img class="lille_billede2 do_something" src="https://i.imgur.com/NN36yEMb.jpg"  alt="food">
        <img class="lille_billede3 do_something" src="https://i.imgur.com/KDTD5wjb.jpg"  alt="food">
      </div>
    </div>
  </div>
</div>

CSS

html, body {
  margin: 0;
  padding: 0;
}
.do_something {
  cursor: pointer;
}
.do_something:hover {
  color: red;
}
img.stortbillede {
  max-width: 100%;
}
.image-wrapper {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}
.image-wrapper img {
  margin: 2px;
}

JavaScript

$('.do_something').on('mouseenter', function() {
	var imagePath = 'https://i.imgur.com/'; // change your path to 'images/'
	var imageSource = $(this).attr('src');
	var imagePathAndFilename = imageSource.lastIndexOf("/") + 1;
	var imageFilename = imageSource.substr(imagePathAndFilename);
  $(this).closest('.produkt').find('.stortbillede').attr('src', imagePath + imageFilename);
})