我如何在彼此中制作2个div

Question

我如何制作这样的div？ https://i.gyazo.com/cc34cdba5d8ef4969212c45935caf165.png 它的1个div，图像（汽车）和背景黑色，上面有文字。当你盘旋时，红色褪色消失了。 这是我想要做的完整的gyazo。 https://i.gyazo.com/51d360e8f4a6408dbed789f0d702dbc7.png

以下是该车的图片：您需要至少10个代表才能发布3个以上的链接，链接应该在评论中！

我尝试了什么：

将1个div命名为black，将其视为：

<div class="black">
<img src="urltocar" height="x" width="x">
</div>

将黑色div设计得比汽车本身更大，所以它有一个黑色的背景，但它从来没有用过。

Answer 1

在这里，圣诞快乐：https://jsfiddle.net/s2moc0gt/1/

基本上只是一些CSS：

.img-container {
  width: 200px;
  height: 200px;
  background-image: url("https://rocket-league.com/content/media/items/avatar/220px/75e8bb7e5d1473412157.png");
  background-repeat: no-repeat;
  background-position: center;
}

.red-overlay {
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent, red);
}

.red-overlay:hover {
  opacity: 0;
}