Как изменить размер изображения при наведении?

Question

[kate_sochi]

всем привет, подскажите, пожалуйста, как сделать так, чтобы при наведении на элемент появлялся текст, а картинка занимала только оставшееся свободное место, в зависимости от длинны текста?

.variantsmk__body 
                    a(href="#").variantsmk__column 
                        .variantsmk__relative 
                            .variantsmk__image
                                img(data-src="holst.jpg")
                        .variantsmk__description 
                            h3.variantsmk__subtitle Мастер класс
                            .variantsmk__descr Текст текст текст
                            .variantsmk__items 
                                .variantsmk__price от 8500 руб.
                                .variantsmk__link

// window.addEventListener("DOMContentLoaded", function() {
//     const column = document.querySelectorAll('.variantsmk__column');
//     const image = document.querySelectorAll('.variantsmk__relative');
//     const title = document.querySelectorAll('.variantsmk__subtitle');
//     const descr = document.querySelectorAll('.variantsmk__descr');
//     const items = document.querySelectorAll('.variantsmk__items');

//     const heightDescription = title.offsetHeight + descr.offsetHeight + items.offsetHeight;
//     const heightImage = image.offsetHeight;
//     const heightImageHover = heightImage - heightDescription;

//     for (let i = 0; i < column.length; i++) {
//         
//     }
// });

Comments

[Вадим]

На подобные вопросы ответ можно получить значительно быстрее, если предварительно подготовить демку на codepen.io и прикрепить её к вопросу.

[Ankhena]

чтобы при наведении на элемент появлялся текст,

.text {display: none;}
.block:hover .text {display: block}

а картинка занимала только оставшееся свободное место, в зависимости от длинны текста?

Грид, object-fit и, по всей видимости абсолют для картинки внутри своего div или figure.