Наложение появляется при наведении - Pure CSS - PullRequest
Новая
       15

Наложение появляется при наведении - Pure CSS

0 голосов
/ 21 ноября 2018

Как вы можете видеть в следующем фрагменте, у меня есть 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>

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

Вы можете просто удалить 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>
0 голосов
/ 21 ноября 2018

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