یلدا ادامه داره... ❤️ ۴۰ درصد تخفیف همه دوره‌ها
استفاده از تخفیف‌ها
زوم تصویر
دیدید در بخش مقالات یا دوره های آموزشی راکت وقتی روی عکس مربوط hover می کردیم کمی تصویر زوم می شد حالا من باید چطور این کار رو بکنم من با background-size این کار رو انجام دادم ولی وقتی hover میشه به جای اینکه از وسط زوم بشه از چپ زوم میشه و تصویر قشنگ درنمیاد چیکار باید بکنم؟
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
یک المنت پدر براش میسازید و
مقدار overflow رو برابر hidden قرار میدید اینطوری زمانی که تصویر سایزش بالا رفت دیگه از المنت پدر بیرون نمی‌زنه
اینو ببینید
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
یک المنت پدر براش میسازید و
مقدار overflow رو برابر hidden قرار میدید اینطوری زمانی که تصویر سایزش بالا رفت دیگه از المنت پدر بیرون نمی‌زنه
دقیقا آقای موسوی گفتن بازم برات کد میذارم اگه متوجه نشدی بهتر متوجه بشی
<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>
سلام خسته نباشید
ببخشید چطور میتونم به نحوه بزرگ شدن استایل بدم؟
این کد من هست:
<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);
}چطور میتونم به نحوه بزرگ شدن استایل بدم؟