JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sprite1"> </div>

<div class="box"> 

<div class="tria"> </div>
<!-- <div class="sprite1"> </div> -->
</div>

CSS

.sprite1 {
background: url('https://puppydogweb.com/gallery/puppies/beagle.jpg') no-repeat;
}

.sprite1 {
	background-position: -43px -38px;
	width: 304px;
	height: 318px;
}
.sprite1:hover {
	background-position: -43px -72px;
	width: 304px;
	height: 319px;
}

.box {
  width: 40%;
  padding-bottom: 28.2842712474619%; /* = width / sqrt(2) */
  position: relative;
  overflow: hidden;
}
.box .tria  {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 122, 199, 0.7);
  transform-origin: 0 100%;
  transform: rotate(45deg);
  transition: background-color .3s;
}

.tria:hover {
               background: rgba(255, 165, 0, 0.7);
}
.tria:hover ~ .sprite1 {
	background-position: -84px -438px;
	width: 122px;
	height: 48px;
}
.tria:hover + .sprite1 {
	background-position: -84px -438px;
	width: 122px;
	height: 48px;
}
.tria:hover > .sprite1 {
	background-position: -84px -438px;
	width: 122px;
	height: 48px;
}
.tria:hover .sprite1 {
	background-position: -84px -438px;
	width: 122px;
	height: 48px;
}