叠加层显示在悬停上-纯CSS

Question

如下面的代码片段所示，我有一个category-box，并且在该框的hover事件上，我希望显示一个叠加层。

这是 Find out more

这里的问题是，我希望叠加层从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

您只需删除transform: translate(-50%, -50%);上的.category-overlay：

.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>