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 ) 2 дек 2019 в 7:29
  • 1
    равно как и display: none / display: block не может меняться плавно - блок или есть, или его нет :) 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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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