فرض کنید کد html زیر را نوشتیم و می خواهیم وقتی موس روی آن می آید ( hover ) ، فقط بک گراند اندکی زوم شود.

 <div className="featured-cat-list">

            <div className="first-col">

                <p className="title"> می خواهید پوستی کاملاً سالم داشته باشید؟</p>
                <p className="sub-title"> خرید کنید</p>

            </div>
</div>

برای این کار از پراپرتی background-size در css استفاده می کنیم:

.featured-cat-list
{
    height: 720px;
    display: flex;
    position: relative;
    padding: 100px 200px 100px 200px;
    overflow: hidden;
}

.first-col
{
    width: 33.333%;
    background: linear-gradient( rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.30)), url("https://manufacturer.stylemixthemes.com/cosmetics/wp-content/uploads/sites/18/2019/08/photo-1514569369508-d2a48d3a423c.jpeg");
    background-position: center ;
    background-repeat: no-repeat;
    background-size: 100%;
    cursor: pointer;
    transition: background-size 500ms ease-in;
    -moz-transition: background-size 500ms ease-in;
    -ms-transition: background-size 500ms ease-in;
    -o-transition: background-size 500ms ease-in;
    -webkit-transition: background-size 500ms ease-in;
}
.first-col:hover
{
    background-size: 110%;
}