html - 在悬停时向列添加半透明覆盖，同时删除标题

Question

我想在鼠标悬停时为我的图像添加一个半透明的覆盖层。为了实现如下效果，我写了代码:

http://imgur.com/a/EnK3k

我想知道只有当用户将鼠标悬停在图像上时，我才能去掉“数据仓库”文本。这是我的代码:

CSS:

.overlay {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #5e8cc9;
  z-index: 99;
}

.text {
  text-align: center;
  color: white;
  font-size: 60px;
  font-family: raleway;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 100;
}

.title {
  z-index: 98;
}

.container1:hover .overlay {
  opacity: .9;
}

.container1:hover .title {
  opacity: 0;
}

HTML:

<div class="overlay">
<div class="text">
<p style="text-align: center; font-size: 18px;">
<span style="color: #ffffff; font-weight: 200;">Cloud-Based | Single Tenant | Mosaic will operationalize warehouse in weeks with no start up cost | Mosaic takes care of all hosting, licensing and maintenance | Mosaic manages day to day operations | Highly flexible scalable warehouse model accommodates long-term evolution of data portfolio and sales operations | Mosaic implements new data sets and new requirements on demand</span></p>

</div>
</div>
<div class="title">
<h1 style="font-size: 56px; text-align: center; position: relative; top:     50%; line-height: 65px;"><span style="color: #ffffff; font-weight: 600;">Data     Warehouse</span></h1>
</div>

唯一的问题是当我制作

.container1:hover .title {
opacity: 0;
}

，标题文本和叠加层被删除。我确信这是一个简单的修复，但我们将不胜感激。谢谢

Answer 1

我没有让你的代码工作，但我不知道这是否是你正在寻找的答案，如果是的话我可以进一步解释它，无论如何它很简单。首先，您必须定位将悬停的元素，然后定位将根据您声明的元素的悬停更改其样式的其他元素。示例:

.element:hover .title{
   color:red;
}

这将导致用户将鼠标悬停在该元素的任何位置，该元素内的标题将变为红色。

我给你一个代码笔，标题隐藏起来，叠加层和标题隐藏起来https://codepen.io/Kristain/pen/QgeZJd

很高兴能帮上忙