Как сверстать двойной hover эффект для блока?

 $(".category__item-wrap").on("click", function () { 
     $(this).toggleClass('double-flip'); 
 });

.category 
	background-image: url(../img/dark-trap.png) 
	background-size: contain 
	background-position: center center 
	background-repeat: no-repeat 
	min-height: 280px 
 
	&__item-wrap 
		background-image: url(../img/prod/1.png) 
		background-repeat: repeat-y 
		background-size: contain 
		min-height: 285px 
		transition: 1s 
		position: relative 
 
		&:hover 
			background-image: url(../img/prod/1-1.png) 
			cursor: pointer 
       
       
   &-desc 
		position: absolute 
		bottom: 20px 
		padding-top: 185px 
 
	 
		color: #000 
		font-size: 16pt 
		font-family: "oswald-light" 
		max-width: 320px 
	 
		margin-left: 25px 
		line-height: 20pt 
	 
		&:hover 
			color:#fbba00ff

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
<div class="col-4"> 
  <div class="category__item-wrap"> 
    <div class="front"> 
      <div class=" text-center category-desc"> 
        Трубы полимерные со структурированной стенкой для систем наружной канализации Polycorr Cold 
      </div> 
    </div> 
    <div class="back"> 
      <div class=" text-center category-desc"> 
        Polycorr Cold 
      </div> 
    </div> 
  </div> 
<div class="d-none"> 
	<img src="img/example-flip" class="flip-img"> 
</div> 
</div>

<img src="img/example-flip" class="flip-img">