JSFiddle - React, Tailwind, and code Playground

by jwpg018241

HTML

<div class="project">
<div class="img_overflow">
 <div class="img_scale">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg">
</div>
</div>
<h1 class="underline">Text Underline</h1>
</div>

CSS

.project h1 {font-size: 26px;
background-image: linear-gradient(transparent 60%, #F8CD07 40%);
background-repeat: no-repeat;
background-size: 10% 100%;
transition: background-size 0.8s;
color: #000;
cursor: pointer;}
.img_overflow {width:200px; height: 200px; overflow:hidden;}
.project img {width:100%;height:auto;}
.img_scale {
  	transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transition: all 0.6s ease-out;
}


.project:hover{
}

.project:hover > .img_scale{
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.project:hover > .underline{
	background-size: 100% 100%;
}