JSFiddle - React, Tailwind, and code Playground

by Nataliia Vernyhora

HTML

<section class="section_product-category ">
  <div class="prodcat_imgs">
    <div class="prodcat_img prodcat-img1 active">
      <img width="720" height="970" src="https://i.postimg.cc/k4pHm2DW/CTA-image.png" class="attachment-full size-full">
    </div>
    <div class="prodcat_img prodcat-img2">
      <img width="345" height="480" src="https://i.postimg.cc/GhwC8fhG/visit-us-wine-glass.jpg" class="attachment-full size-full">
    </div>
    <div class="prodcat_img prodcat-img3">
      <img width="1035" height="1440" src="https://i.postimg.cc/3NLm6GRH/social-image-three.jpg" class="attachment-full size-full">
    </div>
  </div>

  <div class="prodcat_text">
    <h2>Category #1 links</h2>
    <div class="prodcat_btn btn">
      <a class="button-link" data-key=".prodcat-img1" href="https://google.com">Link text here</a><br>
      <a class="button-link" data-key=".prodcat-img2" href="https://google.ca">One more link btn</a><br>
      <a class="button-link" data-key=".prodcat-img3" href="https://google.ua">Link text #3</a><br>
    </div>
  </div>
</section>


<section class="section_product-category ">
  <div class="prodcat_imgs">
    <div class="prodcat_img prodcat-img1 active">
      <img width="720" height="970" src="https://i.postimg.cc/k4pHm2DW/CTA-image.png" class="attachment-full size-full">
    </div>
    <div class="prodcat_img prodcat-img2">
      <img width="345" height="480" src="https://i.postimg.cc/GhwC8fhG/visit-us-wine-glass.jpg" class="attachment-full size-full">
    </div>
    <div class="prodcat_img prodcat-img3">
      <img width="1035" height="1440" src="https://i.postimg.cc/3NLm6GRH/social-image-three.jpg" class="attachment-full size-full">
    </div>
  </div>

  <div class="prodcat_text">
    <h2>Category #2 links</h2>
    <div class="prodcat_btn btn">
      <a class="button-link" data-key=".prodcat-img1" href="https://google.com">Link text here</a><br>
      <a class="button-link" data-key=".prodcat-img2" href="https://google.ca">One more link...

CSS

.section_product-category {
  display: flex;
  width: 90%;
  margin-bottom: 20px;
}
.section_product-category>div {
    width: 70%;
}
.section_product-category>div:first-child {
    width: 30%;
}
h2 {
  margin-bottom: 45px;
}
.prodcat_img {
  display: none;
    overflow: hidden;
    position: relative;
    padding-top: 135%;
    border: 1px solid blue;
}
.prodcat_text {
  padding: 20px 20px 20px 40px;
}
.prodcat_img img {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.prodcat_img.active {
    display: block;
}
.button-link {
  margin-bottom: 7px;
  display:block;
}

JavaScript

$('.prodcat_btn .button-link').hover(
    function() {
        // $($(this).data("key")).addClass('active');
        // $($('.prodcat_btn .button-link').not(this).data('key')).removeClass('active');

        let $section = $(this).closest('.section_product-category');
        $section.find('.prodcat_img').not($(this)).removeClass('active');
        $section.find($(this).data("key")).addClass('active');
    },
    function() {
        // $($(this).data("key")).removeClass('active');
        // $($('.prodcat-img1')).addClass('active');

        let $section = $(this).closest('.section_product-category');
        $section.find($(this).data("key")).removeClass('active');
        $section.find('.prodcat-img1').addClass('active');
    }
);