Здраствуйте как увеличить картинку изнутри?

Question

Здраствуйте как увеличить картинку изнутри?

Рейтинг: 0Ответов: 0Опубликовано: 14.06.2023

...Я пишу не большую вёрстку и хочу что бы картинки увеличивались как здесь (указанная ниже ссылка, 2 -ой пример), в моей вёрстке я уже добился такого эффекта, однако стоит добавить "margin-top" и/или "margin-left", то картинки просто увеличиваются, то есть нужный эффект исчезает. Как это исправить ?

#goods {
    width: 100%;
    height: 700px;
    border: 2px solid;
    margin-top: 50px;
    border-radius: 30px;
    margin-bottom: 100px;
    background-color: white; 
}

#goods .row img {
    /* width: 300px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px; */
}

/* .goods1 .row {
    display: flex;
    justify-content: center;
} */

.row {
    display: inline-block;  
    overflow: hidden;        
   }
   .row img {
    transition: 1s; 
    display: block; 
   }
   .row img:hover {
    transform: scale(1.2); 
   }

<div id="goods" style="text-align: center;">

    <!-- <div class="goods1" style="text-align: center;"> -->
        <div class="row"><img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_mimiso_1306_TV47485.webp" alt="" class="row"></div>
        <div class="row"><img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/nm_beach.webp" alt=""></div>
        <div class="row"><img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_adidas_1306_TV8585696.webp" alt=""></div>
        <div class="row"><img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_sokolov_1306_TV859595.webp" alt=""></div>

        <div class="row"><img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_unison_1306_TV48596.webp" alt=""></div>
        <div class="row"><img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_tecno_1306_TV4785966.webp" alt=""></div>
        <div class="row"><img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_zagar3884955.webp" alt=""></div>
        <div class="row"><img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_garden738455.webp" alt=""></div>
    <!-- </div> -->
</div>

https://webref.ru/recipe/2302

css html

Источник: Stack Overflow на русском

Здраствуйте как увеличить картинку изнутри?

Ответы