在图像悬停时，覆盖原始图像和显示文本

Question

当悬停在图像上时，我希望显示带有文本的辅助图像，但我的方法似乎无法正常工作。

我想要的想象：

红色正常，右侧图像为悬停状态。

这是我目前的做法：

.img-wrap {
  position: relative;
  height: 360px;
  width: 360px;
}

.img-description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s, visibility .2s;
}

.img-wrap:hover .img-description {
  visibility: visible;
  opacity: 1;
}
ul {
    list-style-type: none;
    margin: auto;
}

<div class="img-wrap">
  <ul class="clearfix">
    <li>
      <img src="https://cdn2.hubspot.net/hubfs/1878396/LR%20-%20Landing%20page%20images/LR%20-%20Scottish%20Campaign/large-cta.png?t=1528962213286" />
    </li>
  </ul>
  <img class="img-img" src="https://insights.zonal.co.uk/hubfs/LR%20-%20Landing%20page%20images/LR%20-%20Scottish%20Campaign/cta-bg.png" />
  <h2 class="img-description">TEST</h2>
  <span class="button large-cta-button">Read more</span>
</div>

Answer 1

对于透明色覆盖，您可以在:after上使用li之类的伪元素。这样它将始终保持在li和img之上。 img应该有一个max-width:100%，所以它不会溢出它的父（li）。

然后，有一些样式涉及非常直接。您还可以添加一些关于蓝色叠加层应该如何显示的动画，但这取决于您。

如果您有任何疑问，请在评论中提问。

.img-wrap {
  position: relative;
  height: 360px;
  width: 360px;
}

img {
  max-width: 100%;
  height: auto;
}

.img-wrap ul {
  padding: 0;
}

.img-wrap li {
  position: relative;
}

.img-wrap .img-description {
  position: absolute;
  opacity: 0;
  z-index: 2;
  transition: 0.3s ease-out;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  width:auto;
}

.img-wrap li .img-description h2 {
  margin-bottom: 50px;
}

.img-wrap li .img-description a {
  padding: 10px;
  color: #fff;
  border: 1px solid #fff;
}

.img-wrap li:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s, visibility .2s;
  height: 100%;
  width: 100%;
  content: "";
}

.img-wrap:hover li:after {
  visibility: visible;
  opacity: 1;
}

.img-wrap:hover .img-description {
  opacity: 1;
}

ul {
  list-style-type: none;
  margin: auto;
}

<div class="img-wrap">
  <ul class="clearfix">
    <li>
      <img src="https://cdn2.hubspot.net/hubfs/1878396/LR%20-%20Landing%20page%20images/LR%20-%20Scottish%20Campaign/large-cta.png?t=1528962213286" />
      <div class="img-description">
        <h2>
          TEST
        </h2>
        <a>Test link</a>
      </div>
    </li>
  </ul>
</div>

Answer 2

无需使用其他图像，只需使用背景颜色和不透明度。

＆＃13;

＆＃13;

.img-wrap {
  position: relative;
  height: 360px;
  width: 360px;
}

.img-wrap img{
  width: 100%;
  height: 100%;
}

.img-description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #62ada9;
  color: #fff;
  opacity: 0;
  transition: opacity .3s, visibility .3s;
}

.img-wrap:hover .img-description {
  opacity: 0.8;
}

.img-description h2{
  text-align: center;
}

＆＃13;

<div class="img-wrap">
  <img src="https://cdn2.hubspot.net/hubfs/1878396/LR%20-%20Landing%20page%20images/LR%20-%20Scottish%20Campaign/large-cta.png?t=1528962213286" />
  <div class="img-description"><h2>TEST</h2></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这是通过将元素定位在图像顶部来实现此目的的一种方法。注释中有一些信息，只要询问您是否需要了解更多信息。

全屏打开（按钮太高，无法看到悬停的飞入效果）

body {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  width: 100%;
  flex-wrap: wrap; /* allows .block's to wrap into the next row when end of row is reached */
}
.block {
  position: relative; /* needs to be relative for absolute positioned children */
  width: 50%;
  padding: 2px; /* the way we'll separate the blocks (margin screws with calculations and box-sizing doesnt currently allow for compensating for margin, only padding and borders, thus far) */
  box-sizing: border-box; /* need this so that we can put padding around the images/inside the block and not affect the width % */
  overflow: hidden; /* have to hide the overflow so the button element that is hidden outside of the parent is not seen */
}
.block img {
  display: block; /* gets rid of the blank space under images */
  width: 100%; /* make it repsonsive to container width. height will be auto */
}
.cover {
  position: absolute; /* make sure parent is position: relative */
  top: 2px; /* 2px because we've put padding inside the block and need the position to be relative to the image not the block */
  right: 2px;
  bottom: 2px;
  left: 2px;
  background-color: hsla(184.2, 55.6%, 54.1%, 0.7);
  opacity: 0;
  transition: all 0.2s linear; /* your animation transition settings */
}
.block:hover > .cover {
  opacity: 1;
}
.button {
  /* i recommend making the block the clickable a tag, not the button, to make things a little more mobile friendly (hover covers make for an additional click needed to follow links on many?/most? mobile devices) */
  position: absolute; /* relative to parent (.block ) */
  right: -50%; /* adjust this and transition speed to make it fly in better */
  bottom: 10%;
  display: flex;
  /* default flex direction is row (left to right) */
  justify-content: center; /* with row justify centers horizontally */
  align-items: center; /* and align centers vertically. opposite for column */
  padding: 8px;
  font-size: 19px;
  text-decoration: none; /* get rid of the underline that is default for a tags */
  color: hsla(0, 0%, 100%, 0.9);
  background-color: hsla(0, 0%, 0%, 0.2);
  border-style: solid;
  border-width: 1px;
  border-color: hsla(0, 0%, 100%, 0.9);
  border-radius: 2px;
  transition: all 0.2s linear;
}
.block:hover > .button {
  right: 10%; /* fly in the button on .block hover */
}
.button:hover {
  background-color: hsla(228.8, 76.2%, 58.8%, 0.2);
}
.button i {
  margin-left: 10px;
  font-size: 120%; /* font is 120% the size of whats inherited from parent (.button = 19px so icon (i) = 22.8ish px) - this is to compensate for the icon being a caret which is much smaller than a full sized icon */
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
  <div class="block">
    <img src="https://cdn2.hubspot.net/hubfs/1878396/LR%20-%20Landing%20page%20images/LR%20-%20Scottish%20Campaign/large-cta.png?t=1528962213286">
    <div class="cover"></div>
    <a class="button" href="https://stackoverflow.com/q/50852429/3377049">Flyin In <i class="fa fa-caret-right"></i></a>
  </div>
  <div class="block">
    <img src="https://cdn2.hubspot.net/hubfs/1878396/LR%20-%20Landing%20page%20images/LR%20-%20Scottish%20Campaign/large-cta.png?t=1528962213286">
    <div class="cover"></div>
    <a class="button" href="https://stackoverflow.com/q/50852429/3377049">Zoooom <i class="fa fa-caret-right"></i></a>
  </div>
</div>

<强>拨弄

https://jsfiddle.net/Hastig/5c0swnq6/

Answer 4

尝试在开始时更改您的HTML。 你应该把你的“面具”放在主div中。 尝试类似：

<div class="img-wrap">
 <div class="mask">
  <div class="content">
  </div>
 </div>
</div>

然后你应该将鼠标悬停在img-wrap上并在悬停时将不透明度从0更改为1：）

在“内容”div中只需输入文字和按钮。