Question

我正在寻找一些关于如何为我的WordPress帖子图片添加翻转效果的建议。现在，图像被拉入并设置为背景图像，因此对我来说这很棘手。这是我的代码：

<div class="portfolio-image" style="background: url(<?php echo $src[0]; ?> ); background-size: cover;">


    <h2 style="margin:0; padding: 0;"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

            <?php echo get_the_tag_list('<p> | ','&nbsp;&nbsp; | ','</p>'); ?>

    </div>

.portfolio-image{width: 324px; height: 280px; background-repeat:no-repeat; box-sizing: border-box; border:2px solid #fff; padding: 20px; float: left;}

现在我尝试将div包装并对该div应用悬停效果，但它会反转我想要的内容，因此它会悬停并显示我的帖子图像。我需要做的是将图像显示为正常，但当您将鼠标悬停在图像上时，图像会变暗，标题会显示在顶部。真的很难弄清楚它是一个背景图像。

Answer 1

您可以使用伪元素作为叠加颜色，而无需额外标记。

.portfolio-image {
  background-image: url(http://lorempixel.com/output/people-q-c-324-280-6.jpg);
  width: 324px;
  height: 280px;
  bg background-repeat: no-repeat;
  box-sizing: border-box;
  border: 2px solid #fff;
  padding: 20px;
  float: left;
  color: white;
  position: relative;
}
.portfolio-image > * {
  opacity: 0;
  transition: opacity: 0.25s ease;
  position: relative;
}
.portfolio-image:hover > * {
  opacity: 1;
}
.portfolio-image:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.25s ease;
}
.portfolio-image:hover:before {
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

<div class="portfolio-image">
  <h2>some text</h2>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Answer 2

我建议添加另一个div对象，用你的背景图像覆盖对象。新对象可能包含您的文本和另一个背景图像。 CSS可能是这样的：

div.overlay {
    opacity:0;
    /* IE8 or earlier */
    filter:alpha(opacity=0);
    /* add your positioning styles here */
}

div.overlay:hover {
    opacity:0.8;
    filter:alpha(opacity=80);
}

添加带有文本的非常基本的颜色叠加层

2 个答案: