JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-lg-12" style="height: 300px; width: 300px;">
  <div class="image-fader">
  <a href="#" title="Products" class="products"></a>
    <a href="#" class="details-btn">View more details -></a>


    </div>
</div>

CSS

.details-btn {
  color: blue;
  border: 1px solid blue;
  background-color: orange;
  padding: 5px;
  position: relative;
  top: 150px;
}

.image-fader {
  width: 100%;
  height: 100%;
  background-image: url("https://68.media.tumblr.com/avatar_0c7ef91e0767_128.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.col-lg-12 {
  background-color: #000;
}

.products {
  background-color: green;
  width: 100%;
  height: 100%;
}

JavaScript

$('a.details-btn').on('hover', function(e) {
       var li = $(this).closest('.col-lg-12').find('a:first');
       if(e.type == 'mouseenter') li.css('opacity', '0.6');
       else li.css('opacity', '1.0');
    })