بزرگ شدن تصاویر بعد از hover روی تصاویر

قبلا در این گفتگو به این سوال پاسخگویی شدش:
https://roocket.ir/discuss/8702

سلام میخوام وقتی موس روی تصویر میره روش زوم شه و عکس رنگش تیره تر شه چیکار کنم؟؟؟

برای کوچک شدن هم همین کد را بزنید و عدد را 0.5 بگذارید

سلام دوستان یک سوال چطور میتونیم hover رو روی عکس تقسیم بندی کنیم مثلا عکس هر سمت عکس رفت اون قسمت hover بشه مثلا یه hover scale برداره بزرگ بشه

سلام، برای بزرگ کردن تصویر بعد از hover به کد CSS زیر نیاز دارید:

img {
  transition: transform 0.2s ease-in-out;
}

img:hover {
  transform: scale(1.2);
}

در این کد، تغییراتی در مقیاس تصویر بعد از hover و با استفاده از transform: scale() ایجاد می‌شود. برای روانتر شدن حرکت، از ترانزیشن transition: transform 0.2s ease-in-out; نیز استفاده شده است.

می‌توانید این کد را به کلاس تصویر خود اعمال کنید، مثلاً:

.my-image {
  transition: transform 0.2s ease-in-out;
}

.my-image:hover {
  transform: scale(1.2);
}

در این صورت، کلاس my-image به تصاویری که می‌خواهید بزرگ شوند اضافه شود. برای مثال، می‌توانید تصویر زیر را با استفاده از این کد بزرگ کنید:

<img src="path-to-image.jpg" alt="تصویر" class="my-image">

برای زمانی که موس روی تصویر میره روش زوم شه و عکس رنگش تیره تر شه بهتر است از CSS و JavaScript استفاده کنید.

ابتدا باید تصویر را با CSS کنترل کنید و دو خاصیت transition و transform را به آن اضافه کنید. این خاصیت‌ها به شما امکان ایجاد تأثیرات hover روی تصویر را می‌دهند.

در زمان hover روی تصویر، با استفاده از JavaScript، رنگ پس زمینه آن را تیره‌تر کنید و مقیاس تصویر را به سمت بیشتر کردن و مناسب کردن تصویر بزرگ‌تر تغییر دهید.

به عنوان مثال، کد CSS زیر برای ایجاد تأثیرات hover روی تصویر مورد نظر مانند آنچه در سایت راکت قابل مشاهده است می‌تواند استفاده شود:

.img-container {
  position: relative;
  line-height: 0;
}

.img-container img {
  width: 100%;
  display: block;
  transition: transform 0.3s ease,
              filter 0.3s ease;
}

.img-container:hover img {
  transform: scale(1.1);
  filter: brightness(75%);
}

در این کد، با استفاده از transform، مقیاس تصویر به 1.1 برابر افزایش پیدا می‌کند. به علاوه، با استفاده از filter، رنگ پس‌زمینه تصویر را به 75 ٪ تیره‌تر می‌کنیم.

به عنوان مثال، برای تصویر کنار قرار گرفته در یک div با کلاس .img-container، قرار دهید:

<div class="img-container">
  <img src="path-to-image.jpg" alt="تصویر">
</div>

اگر می‌خواهید تصاویر مختلفی برای این تأثیرات در نظر بگیرید، می‌توانید به هر تصویر یک کلاس اختصاص دهید، مانند زیر:

<div class="img-container">
  <img src="path-to-image1.jpg" alt="تصویر" class="my-image">
</div>

<div class="img-container">
  <img src="path-to-image2.jpg" alt="تصویر" class="my-image">
</div>

<div class="img-container">
  <img src="path-to-image3.jpg" alt="تصویر" class="my-image">
</div>

پس از این، می‌توانید به کلاس .my-image در CSS و JavaScript ارجاع دهید.

@AlmasTV