css - 如何在 CSS 中的图像顶部放置彩色封面

Question

当我将鼠标悬停在图像上时，我希望能够用蓝色覆盖图像。

如何使用纯 CSS 实现它？

<div class="col-xs-3">
  <h1>Some title here</h1>
  <img src="the_image.png" height: "100px", width: "100px">
  <p>Some text here...</p>
</div>

Answer 1

我不知道你到底想要什么，但是 here is an example.

#cat {
    background: url(http://www.funnycatsite.com/pictures/Do_Not_Turn_The_Water_On.jpg);
    height: 400px;
    width: 400px;
}
#cat:hover {
    background: blue;
}