زوم تصویر

اینو ببینید
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_zoom_hover
منظورتون اینه؟

شما باید از transform ها استفاده کنید مثل حالت زیر

.product:hover img {
  transform: scale(1.5);
}

حالا برای اینکه خیلی زمخت نباشه زوم کردن میتونید ترنزیشن رو روی img مثلا روی .3s قرار بدید

خب اینجوری عکس از صفحه میزنه بیرون اگه بخش مقالات یا دوره های آموزشی راکت رفته باشید می بینید که فقط زوم میشه و از div خودش خارج نمیشه @hossein.r.1442 @elyasbeshkani

اگه امکان داره پاسخ بدید.
@elyasbeshkani @hossein.r.1442 @ali.bayat
@hesammousavi @endworld @milad @mohsenbostan @rezajashnsaz0011 @elyasbeshkani

دقیقا آقای موسوی گفتن بازم برات کد میذارم اگه متوجه نشدی بهتر متوجه بشی

<div class="product">
    <div class="product-img">
        <img src="/img/product1.png">
    </div>
    <div class="product-body">
        <h2>محصول شماره یک</h2>
    </div>
</div>

<style>
.product-img {
    overflow: hidden;
}
</style>

درود..
پیوند زیر:
https://www.w3schools.com/howto/howto_css_zoom_hover.asp

سلام خسته نباشید

ببخشید چطور میتونم به نحوه بزرگ شدن استایل بدم؟
این کد من هست:

        <div class="box box-back"><a class="content-picture"><img src="./images/picture1.jpg" alt=""></a></div>
        <div class="box box-back"><a class="content-picture"><img src="./images/picture2.png" alt=""></a></div>
        <div class="box box-back"><a class="content-picture"><img src="./images/picture3.jpg" alt=""></a></div>

.content-picture img{
  border-radius: 3px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.content-picture img:hover{
transform: scale(2) rotate(40deg);
}

چطور میتونم به نحوه بزرگ شدن استایل بدم؟