gift.css

/* Размер подарка предлагаю делать в зависимости от ширины экрана */
/* Поэтому можно использовать aspect-ratio padding-top хак */

/* Единый блок единого размера для всех гифтов */
/* Получается тупа квадратик, который зависит от ширины */
.gift {
	width: 15%;
	/* Нужно подобрать значение относительно других вещей */
	/* Т.к. это общая ширина учитывая отступ вокруг подарка */
}
.gift:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

/* Это на будущее */
.gift-elem {
	background-image: none;
}

/* 
	.gift-a / b / c / d 
	Разные виды изображений гифтов и для каждого блоки ниже будут свои
*/

.gift-d .gift-elem {
	/* Блок который будет вращаца. Содержит ховер и картинку */
	width: 65%;
	height: 80%; /* Можно поиграться, тут получается 20% кликабельного отступа */
	/* Нужно изменить width так, чтобы он соответствовал соотношению сторон картинки ховера */
	/* Например для картинки ховера 200x300 получается: 200/300*80 = 53.333% */
	
	background-size: 100% 100%;
	
	top: 0; bottom: 0; left: 0; right: 0;
	margin: auto;
}
.gift-d .gift-elem:hover {
	background-image: url("assets/gift-d_hover.png");
}

.gift-d .gift-elem .gift-pic {
	/* Изображение подарка */
	/* Нужно спозиционировать картинку, в зависимости от его ховера */
	/* Все значения в процентах, у каждого вида свои */
	top: 000%;
	left: 000%;
	width: 000%;
	height: 000%; 
}

gift.html

<div class="gift gift-d">
	
	<div class="gift-elem">
		<!-- src тут получается разный -->
		<img src="png" class="gift-pic">
	</div>
	
	<img src="png" class="plus-one">
	
</div>