html - Blogger 中流行的帖子小部件的悬停效果

Question

我是一个新手，但我一直在努力弄清楚如何为 Blogger 中热门帖子小部件的缩略图获得悬停效果。

我有相对较大的缩略图，我想让帖子的标题显示在 hover 上。

Like this

谁能帮我解决这个问题？我一直试图在网上找到解决方案，但到目前为止一无所获。

Answer 1

实际上，使用 display: block; 和 none 可以简单地实现以下内容，但是您将无法传输元素，因此，为了传输元素，我们将通过使用 opacity: 0; 隐藏它，并在 hover 上将其更改为 1，您可以制作 背景 使用 rgba() 不透明，使用 transition 平滑。另外，不要忘记将父元素设为 position: relative;，因为它包含一个 absolute 定位的子元素。

我从头开始做了下面的例子，你可以看看...

Demo

div.wrap {
    position: relative;
    display: inline-block;
}

div.wrap img {
    display: block;
}

.title {
    opacity: 0;
    background: rgba(255,255,255,.5);
    padding: 5px;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    position: absolute;
    top: 50%;
    right: 0;
}

div.wrap:hover .title {
    opacity: 1;
}