0

Хочу что-бы при наведении на картинку, на ней появлялся полупрозрачный градиент и 2 кнопки. Что-то у меня и получилось, но все же я не до конца понимаю как оно работает. Почему только, когда задать полупрозрачному градиенту z-index: -1; то оно работает. Все остальные варианты с z-index всем блокам ничего не работало. И как сделать что-бы было плавное появление, а не резкое, тоже ни transition не animation у меня не получилось((

.new-product__item-image {
  background-color: red;
  width: 300px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.new-product__item-btn {
  display: none;
}

.btn-product {
padding: 10px 20px;  
}

.new-product__item-image:hover::after{
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; 
  background-color: blue;
  z-index: -1
 
}
.new-product__item-image:hover .new-product__item-btn{
  display: block;
}

.new-product__item-image:hover .btn-product{
  background-color: pink;
  z-index: 100
}
<div class="new-product__item-image">
		<div class="new-product__item-btn">
			<button class="btn-product btn-info">More Info</button>
			<button class="btn-product btn-demo">Live Demo</button>
		</div>
</div>

2
  • 2
    z-index не может плавно меняться... оно или над, или под) Нужно переключать opacity ( 0 ←→ 1 ) Commented 2 дек. 2019 в 7:29
  • 1
    равно как и display: none / display: block не может меняться плавно - блок или есть, или его нет :) Commented 2 дек. 2019 в 7:32

2 ответа 2

1

.mama {
  position: relative;
  background-color: #22282b;
  color: #ddd;
  width: 300px;
  height: 200px;
} /* Не хотелось сильно засорять код позиционированием */

.bubu { /* Вместо ::after, сам блок можно растянуть на весь размер родителя. */
  opacity: 0;  /* << */
  transition: opacity 1s;
    
  position: absolute; 
  top: 0; left: 0;
  background-image: linear-gradient( #045acf88, #1238 ); 
  /* Четвертая "группа" чисел задает прозрачность. ff - стандартный, 00 - невидимый, 
     а 88 и 8 как-раз где-то посередине прозрачности */
  padding: 50px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;  
}

.mama:hover .bubu {
  opacity: 1;  /* << */
}
<div class="mama">
  Какой-то текст...
  <div class="bubu">
    <button class="btn">More Info</button>
    <button class="btn">Live Demo</button>
  </div>
</div>

1

используй opacity 1; 0-1 пример 0.25,0.5,0.75

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.