Хочу что-бы при наведении на картинку, на ней появлялся полупрозрачный градиент и 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>
opacity ( 0 ←→ 1 )