Куда добавить transition-delay: 0.5s;?

Question

[Влад]

Сайт https://seegi.ee/elutuba/elutoa-kapid/seinakapid
При наведении на карточку с товаром появляются дополнительные фотографии.
Подскажите, пожалуйста, куда надо дописать transition-delay: 0.5s; или ещё чего, чтобы сделать задержку в 0,5 сек

Answer 1

[Ler Den]

зависит от того, какой эффект нужно достичь. Сам по себе dipsplay: block; не поддается анимации.
Можно сделать по умолчанию

display: block; 
width: 0;
transition: width ease-in 0.5s;

а при наведении делать типа такого :
width: 100px;

Comments

[Влад]

мм а как на этом сайте реализовано появление меню сверху? там разве с параметром height манипулируют?

[Ler Den]

Влад, при скролле добавляется position:fixed, и наоборот - когда пролистал страницу вверх - удаляется

[Влад]

.product-thumb .thumb-left{
    display:none;right:100%;top:0;height:100%;background-color:#fff;padding:12px 3px 16px 3px;width:37%;position:absolute;
    border-right: 1px solid #ccc;
    margin-right: 3px;
    border-left: 1px solid #ccc;
    margin-left: 3px;
    border-bottom: 1px solid #ccc;
        width: 0;
    transition: width ease-in 0.5s;
}
.product-grid:hover .product-thumb .thumb-left{display:block;width:100px;}

не помогло. что не так?

[Ler Den]

.product-thumb .thumb-left{
    display:block;right:100%;top:0;height:100%;background-color:#fff;padding:12px 3px 16px 3px;width:37%;position:absolute;
    border-right: 1px solid #ccc;
    margin-right: 3px;
    border-left: 1px solid #ccc;
    margin-left: 3px;
    border-bottom: 1px solid #ccc;
        width: 0;
    transition: width ease-in 0.5s;
}
.product-grid:hover .product-thumb .thumb-left{width:100px;}

[Влад]

Ler Den, какаято дичь получается.. я не хочу анимацию, мне нужна задержка в появлении дополнительных картинок..
какойто другой вариант нужен..

[Влад]

Ler Den, кажется чтото получилось. transtion-delay нужен.
а как сделать, чтобы при уведение курсора мыши блок пропадал уже без задержки, а сразу?