@LastGeneral

Как сделать анимацию плавного появления блока?

<div class="product-item">
    <div class="product-img">
          <img src="./img/product.png" alt="">
          <div class="feature">
               <a href="#"><i class="fas fa-info"></i>Детали</a>
           </div>
    </div>
 </div>

.product-item
    background: #fff
    display: inline-block
    margin: 0
    margin-bottom: 10px
    padding: 13px
    border-radius: 10px
    text-align: left
    position: relative
    overflow: hidden
    .product-img
        position: relative
        display: flex
        justify-content: center
        padding: 10px 0px
        margin: 0
        overflow: hidden
        img
            width: 150px
            display: block
            position: relative
        .feature
            position: absolute
            top: 0
            left: 0
            color: #ed4e6e
            i
                padding: 14px
                color: black
                border-radius: 50%
                border: 1px solid #f1f1f1
                line-height: 0.5
                &:hover
                    background: #1ecacd
            a
                text-align: center
                display: inline-block
                color: #000
        img
            z-index: 2
            transition: transform 0.4s
        .feature
            top: 30%
            left: 33%
            bottom: 0
            z-index: 1
    .product-img:hover img
        transform: translateX(-120px)

5e4990ff0d507301972072.png
при наведении картинка сдвигается в левую сторону
5e49912eaf602480223202.png
как сделать так что бы при этом блок feature плавно появлялся?
  • Вопрос задан
  • 356 просмотров
Пригласить эксперта
Ответы на вопрос 3
@HabrDima20
Прописать для feature {

display: none
transition
}

Потом
hover{
display: block}
Ответ написан
@matios
Technical Team Lead
opacity, margin, left в сочетании position: relative

.object {
   position: absolute;
   left: -100px;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}
.object.active {
   left: 0;
}
Ответ написан
Комментировать
@Mak_Pet
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы