JSFiddle - React, Tailwind, and code Playground

by daniel_juri

HTML

<div class="big-holder">

  <div class="single-post-holder">
  <a class="" href="#">
    <div class="single-holder-image">
       <img src="https://i.picsum.photos/id/717/200/300.jpg?hmac=OJYQhMLNcYlN5qz8IR345SJ7t6A0vyHzT_RdMxO4dSc" alt="">
    </div>
  </a>
  <div class="description-holder">
    <p class="category name "></p>
    <a class="read-more-a-black" href="#"><h5>Title 2</h5></a>
    <a class="read-more-a-black-p" href="#">lorem test test test test</a>
    <div class="pdf-holder">
      <p>Tools:</p>
    </div>
  </div>
</div>

  <div class="single-post-holder">
  <a class="" href="#">
    <div class="single-holder-image">
       <img src="https://i.picsum.photos/id/717/200/300.jpg?hmac=OJYQhMLNcYlN5qz8IR345SJ7t6A0vyHzT_RdMxO4dSc" alt="">
    </div>
  </a>
  <div class="description-holder">
    <p class="category name "></p>
    <a class="read-more-a-black" href="#"><h5>Title 2</h5></a>
    <a class="read-more-a-black-p" href="#">lorem test test test test</a>
    <div class="pdf-holder">
      <p>Tools:</p>
    </div>
  </div>
</div>


</div>

CSS

.big-holder {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100px;
  height: 100px
}

.single-post-holder {
  margin: 10px;
}


.read-more-a-black {
	color: #000;
	transition: all .3s ease-in-out;
}

.read-more-a-black:hover{
	text-decoration: none;
	color: #a2d0ba;
}
.single-holder-image {
	min-height: 160px;
	overflow: hidden;
}

JavaScript

$(function() {
  $(".single-holder-image").hover(function() {
    $(".read-more-a-black").css('color', 'yellow');
  }, function() {
    // on mouseout, reset the background colour
    $(".read-more-a-black").css('color', '');
  });
});