当我使用transform属性时，如何将两个img组合成一个img？

Question

我目前正在尝试创建一个动态的项目列表，其中每个项目都附带一个图像，因为它是缩略图。在该列表中，我想在顶部展示一些项目，并且我想在项目缩略图的角落添加另一个倾斜的图像，其中包含“特色”。

问题是：当我将鼠标悬停在项目上时，使用CSS中的transform: scale();属性放大缩略图。然而，特色标签从它自己的中心放大而不是跟随缩略图。我希望这两个<img>的行为像一个<img>，但我不知道如何。

.itemCard img:not([src="http://hex4nova.cf/assets/thumb/featured.png"]) {
	-webkit-flex: none;
	flex: none;
	border-radius: 15px;
	margin-right: 1em;
	width: 120px;
	box-shadow: 0px 0px 3px #696969;
	-webkit-transition: transform 0.2s;
	transition: transform 0.2s;
}
.itemCard img[src="http://hex4nova.cf/assets/thumb/featured.png"] {
	position: absolute;
	left: -20px;
	top: -10px;
	transform: rotate(-15deg);
	-webkit-transition: transform 0.2s;
	transition: transform 0.2s;
}
.itemCard:hover img {
	transform: scale(1.1, 1.1);
}

<div class="itemCard"><img src="http://hex4nova.cf/w/icon/2017100801.png" alt="(thumbnail)" width="120px"><img src="http://hex4nova.cf/assets/thumb/featured.png" alt="featured"></div>

这是我第一次在Stack Overflow上提问。很抱歉，如果这是重复的，我搜索了几次，找不到任何能回答我问题的内容。