Как добавить кнопку при наведении в блок FR304 в Тильда

ART SILVER THE PLATED

Everyday we work hard to make life of our clients better and happier

Как добавить кнопку при наведении в блок FR304 в Тильда

1
Создали блок FR304 на 3 карточки
2
Добавили код в блок другое Т123
В коде прописали ID блока
let frId = '#rec271331838';
и ссылки для картинок
https://yandex.ru
https://google.ru
https://mail.ru
Библиотека для примера

<style>
.t908__box-img:before { transition: all ease-in-out .25s}
.t908__img{ transition: all ease-in-out .85s}  
.t908__box-img {
    position: relative;
    overflow: hidden;
}
.t908__box-img_active {
    display: flex;
}
.t908__box-img:before {
    content: "Learn More \279C";
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Bebas Neue',Arial,sans-serif;
    font-size: 18px;
    color: #000;
    padding: 12px 30px;
    background-color: #fff;
    border-radius: 7px;
    opacity:0;
    z-index:99;
}
.t908__box-img:hover .t908__img { 
    filter: brightness(0.7);
    transform: scale(1.07);
}
.t908__box-img:hover:before {
    top: 50%;
    opacity:1;
    
}
@media screen and (max-width:980px){
.t908__box-img:before {
    top: 50%;
    opacity:0.6;
}
.t908__img { filter: brightness(0.7)}
.t908__box-img:hover .t908__img { 
    transform: none;
}
}
</style>

<script>
$( document ).ready(function() {
   let frId = '#rec271331838';
   $(frId+' .t908__box-img[data-item-content-number="1"]').wrap('<a target="_blank" href="https://yandex.ru"></a>');
   $(frId+' .t908__box-img[data-item-content-number="2"]').wrap('<a target="_blank" href="https://google.ru"></a>');
   $(frId+' .t908__box-img[data-item-content-number="3"]').wrap('<a target="_blank" href="https://mail.ru"></a>');
});
</script>
Made on
Tilda