Question

我想在悬停时反转叠加层。我不知道这个。我希望首先显示该文本，当您将鼠标悬停在图像上时，该文本和覆盖图应消失。提前致谢。这是代码：

.img-box {
    position: relative;
    width: 100%;
}
.overlay {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #3d3d3eb8;
    position: absolute;
}
.text {
    color: white;
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}
.img-box:hover .overlay {
    opacity: 1;
    width:12%;
}

<div class="container">
  <div class="row">
	<div class="col-md-4">
	  <div class="img-box">
        <div class="overlay">
    	  <div class="text">Title here</div>
 	    </div>
		<img src="https://picsum.photos/230/330"                              alt="title">
	</div>
  </div><!-- // image overlay //-->
</div>

Answer 1

这是您的意思吗？您只需要将初始值（不透明度和宽度）与悬停值交换即可。也可以在codepen中使用。

.img-box {
    position: relative;
    width: 100%;
}
.overlay {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 12%;
    opacity: 1;
    transition: .5s ease;
    background-color: #3d3d3eb8;
    position: absolute;
}
.text {
    color: white;
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}
.img-box:hover .overlay {
    opacity: 0;
    width:100%;
}

<div class="container">
  <div class="row">
				<div class="col-md-4">
					<div class="img-box">
            <div class="overlay">
    							<div class="text">Title here</div>
 						 </div>
						<img src="https://picsum.photos/230/330"                              alt="title">
					</div>
				</div><!-- // image overlay //-->
</div>

Answer 2

您的代码示例运行正常，但是您需要做的就是交换不透明度值。像这样：

.overlay {
  opacity: 1; /* 1 instead of 0 */
}

.img-box:hover .overlay {
  opacity: 0; /* 0 instead of 1 */
}

我希望这会有所帮助。

悬停时反转叠加CSS

2 个答案: