覆盖出现在悬停 - 纯 CSS

Question

正如您在下面的 sn-p 中看到的，我有一个 category-box 并且在该框的 hover 事件上我希望出现一个叠加层。

这里是CODEPEN

这里的问题是，我希望覆盖从category-box 的中间开始并出现。但在这里你可以看到它从中间的某个地方开始。

.category-box {
  padding: 15px 0;
  position: relative;
}

.category-img {
  overflow: hidden;
}

.category-img img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-transition: ease 0.4s all;
  -moz-transition: ease 0.4s all;
  -ms-transition: ease 0.4s all;
  transition: ease 0.4s all;
}

.category-big-box .category-img img {
  height: 500px;
}

.category-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #000000;
  color: white;
  padding: 25px;
  text-align: center;
  min-width: 260px;
  min-height: 125px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.category-overlay {
  position: absolute;
  left: 0;
  height: 0;
  width: 0;
  background-color: rgba(0, 0, 0, 0.45);
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: ease 0.4s all;
  -moz-transition: ease 0.4s all;
  -ms-transition: ease 0.4s all;
  transition: ease 0.4s all;
}

.category-big-box:hover .category-overlay {
  top: 15px;
  transform: none;
  left: 0;
}

.category-box:hover .category-overlay {
  height: calc(100% - 30px);
  width: 100%;
}

.category-box:hover .category-img img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

<div class="category-box category-big-box">
  <div class="category-img">
    <img src="https://timeless-dubai.com/wp-content/uploads/2018/07/i3.jpg" alt="Category Image">
  </div>
  <div class="category-content">
    some content
  </div>
  <div class="category-overlay"></div>
</div>

Answer 1

您可以在.category-overlay 上删除transform: translate(-50%, -50%);：

.category-box {
  padding: 15px 0;
  position: relative;
}

.category-img {
  overflow: hidden;
}

.category-img img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-transition: ease 0.4s all;
  -moz-transition: ease 0.4s all;
  -ms-transition: ease 0.4s all;
  transition: ease 0.4s all;
}

.category-big-box .category-img img {
  height: 500px;
}

.category-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #000000;
  color: white;
  padding: 25px;
  text-align: center;
  min-width: 260px;
  min-height: 125px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.category-overlay {
  position: absolute;
  left: 0;
  height: 0;
  width: 0;
  background-color: rgba(0, 0, 0, 0.45);
  top: 50%;
  left: 50%;
  /*-webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);*/
  -webkit-transition: ease 0.4s all;
  -moz-transition: ease 0.4s all;
  -ms-transition: ease 0.4s all;
  transition: ease 0.4s all;
}

.category-big-box:hover .category-overlay {
  top: 15px;
  transform: none;
  left: 0;
}

.category-box:hover .category-overlay {
  height: calc(100% - 30px);
  width: 100%;
}

.category-box:hover .category-img img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

<div class="category-box category-big-box">
  <div class="category-img">
    <img src="https://timeless-dubai.com/wp-content/uploads/2018/07/i3.jpg" alt="Category Image">
  </div>
  <div class="category-content">
    some content
  </div>
  <div class="category-overlay"></div>
</div>

如果您想 100% 确定绝对定位的元素居中，您可以使用以下属性：

/* Center horizontally */
right: 0;
left: 0;
margin: auto;

/* Center vertically */
top: 50%;
transform: translateY(-50%);

#container {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}

#child {
  width: 30px;
  height: 30px;
  background: yellow;
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  top: 50%;
  transform: translateY(-50%)
}

<div id="container">
  <div id="child"></div>
</div>

Answer 2

在.category-overlay 使用这个

  top: calc(50% + 88px);
  left: calc(50% + 155px);

88px 和 155px 是盒子大小的一半，所以它应该是内容的中间。

.category-box {
  padding: 15px 0;
  position: relative;
}

.category-img {
  overflow: hidden;
}

.category-img img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-transition: ease 0.4s all;
  -moz-transition: ease 0.4s all;
  -ms-transition: ease 0.4s all;
  transition: ease 0.4s all;
}

.category-big-box .category-img img {
  height: 500px;
}

.category-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #000000;
  color: white;
  padding: 25px;
  text-align: center;
  min-width: 260px;
  min-height: 125px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.category-overlay {
  position: absolute;
  left: 0;
  height: 0;
  width: 0;
  background-color: rgba(0, 0, 0, 0.45);
  top: calc(50% + 88px);
  left: calc(50% + 155px);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: ease 0.4s all;
  -moz-transition: ease 0.4s all;
  -ms-transition: ease 0.4s all;
  transition: ease 0.4s all;
}

.category-big-box:hover .category-overlay {
  top: 15px;
  transform: none;
  left: 0;
}

.category-box:hover .category-overlay {
  height: calc(100% - 45px);
  width: 100%;
}

.category-box:hover .category-img img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

<div class="category-box category-big-box">
  <div class="category-img">
    <img src="https://timeless-dubai.com/wp-content/uploads/2018/07/i3.jpg" alt="Category Image">
  </div>
  <div class="category-content">
    some content
  </div>
  <div class="category-overlay"></div>
</div>