Найти Π² Π”Π·Π΅Π½Π΅
IT Step by step

πŸ’» Web-Ρ€Π°Π·Π±ΠΎΡ€: ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠ»Π°Π²Π½ΠΎΠ΅ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ Ρ„ΠΎΡ‚ΠΎ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора

πŸ’» Web-Ρ€Π°Π·Π±ΠΎΡ€: ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠ»Π°Π²Π½ΠΎΠ΅ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ Ρ„ΠΎΡ‚ΠΎ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ВсСм ΠΏΡ€ΠΈΠ²Π΅Ρ‚! БСгодня Ρ€Π°Π·Π±Π΅Ρ€Ρ‘ΠΌ, ΠΊΠ°ΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ красивый эффСкт: ΠΊΠΎΠ³Π΄Π° наводишь курсор Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ - ΠΎΠ½Π° ΠΏΠ»Π°Π²Π½ΠΎ увСличиваСтся. Π’Π°ΠΊΠΎΠΉ ΠΏΡ€ΠΈΡ‘ΠΌ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π½Π° сайтах ΠΈ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ изобраТСния ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ интСрфСйс соврСмСнным. πŸ“„ HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° <div class="img-hover-zoom"> <img src="ΠΏΡƒΡ‚ΡŒ_ΠΊ_Ρ‚Π²ΠΎΠ΅ΠΉ_ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅.jpg" alt="ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Ρ„ΠΎΡ‚ΠΎ"> </div> 🎨 CSS для ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ увСличСния .img-hover-zoom { height: 300px; /* Π—Π°Π΄Π°Ρ‘ΠΌ высоту ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° */ overflow: hidden; /* ΠŸΡ€ΡΡ‡Π΅ΠΌ всё, Ρ‡Ρ‚ΠΎ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ */ width: 300px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΏΠΎ ТСланию */ border-radius: 12px; /* Π‘ΠΊΡ€ΡƒΠ³Π»Π΅Π½ΠΈΠ΅ ΡƒΠ³Π»ΠΎΠ² для красоты */ box-shadow: 0 4px 16px rgba(0,0,0,0.15); /* Лёгкая Ρ‚Π΅Π½ΡŒ */ } .img-hover-zoom img { width: 100%; height: 100%; object-fit: cover; /* ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° заполняСт ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ */ transition: transform 0.5s ease; /* Плавная анимация */ } .img-hover-zoom:hover img { transform: scale(1.2); /*

πŸ’» Web-Ρ€Π°Π·Π±ΠΎΡ€: ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠ»Π°Π²Π½ΠΎΠ΅ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ Ρ„ΠΎΡ‚ΠΎ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора

ВсСм ΠΏΡ€ΠΈΠ²Π΅Ρ‚! БСгодня Ρ€Π°Π·Π±Π΅Ρ€Ρ‘ΠΌ, ΠΊΠ°ΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ красивый эффСкт: ΠΊΠΎΠ³Π΄Π° наводишь курсор Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ - ΠΎΠ½Π° ΠΏΠ»Π°Π²Π½ΠΎ увСличиваСтся. Π’Π°ΠΊΠΎΠΉ ΠΏΡ€ΠΈΡ‘ΠΌ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π½Π° сайтах ΠΈ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ изобраТСния ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ интСрфСйс соврСмСнным.

πŸ“„ HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°

<div class="img-hover-zoom">

<img src="ΠΏΡƒΡ‚ΡŒ_ΠΊ_Ρ‚Π²ΠΎΠ΅ΠΉ_ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅.jpg" alt="ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Ρ„ΠΎΡ‚ΠΎ">

</div>

🎨 CSS для ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ увСличСния

.img-hover-zoom {

height: 300px; /* Π—Π°Π΄Π°Ρ‘ΠΌ высоту ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° */

overflow: hidden; /* ΠŸΡ€ΡΡ‡Π΅ΠΌ всё, Ρ‡Ρ‚ΠΎ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ */

width: 300px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΏΠΎ ТСланию */

border-radius: 12px; /* Π‘ΠΊΡ€ΡƒΠ³Π»Π΅Π½ΠΈΠ΅ ΡƒΠ³Π»ΠΎΠ² для красоты */

box-shadow: 0 4px 16px rgba(0,0,0,0.15); /* Лёгкая Ρ‚Π΅Π½ΡŒ */

}

.img-hover-zoom img {

width: 100%;

height: 100%;

object-fit: cover; /* ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° заполняСт ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ */

transition: transform 0.5s ease; /* Плавная анимация */

}

.img-hover-zoom:hover img {

transform: scale(1.2); /* Π£Π²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅ΠΌ Ρ„ΠΎΡ‚ΠΎ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */

}

πŸ“ Как это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚?

βœ¨ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ .img-hover-zoom ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ скрываСт лишнСС (overflow: hidden).

βœ¨ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΠ»Π°Π²Π½ΠΎ увСличиваСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ transform: scale(1.2) ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.

βœ¨Π‘Π²ΠΎΠΉΡΡ‚Π²ΠΎ transition ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° ΠΏΠ»Π°Π²Π½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

πŸ’‘ Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΎΡ‚ Π’ΠΈΠΌΠ°:

✨МоТно ΠΌΠ΅Π½ΡΡ‚ΡŒ ΡΡ‚Π΅ΠΏΠ΅Π½ΡŒ увСличСния: scale(1.1) - Ρ‡ΡƒΡ‚ΡŒ-Ρ‡ΡƒΡ‚ΡŒ, scale(1.5) - Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎ.

βœ¨Π”Π»Ρ адаптивности Π½Π΅ Π·Π°Π΄Π°Π²Π°ΠΉΡ‚Π΅ Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ/высоту, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹ ΠΈΠ»ΠΈ max-width.

βœ¨Π•ΡΠ»ΠΈ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ„ΠΎΡ‚ΠΎ, Π½ΠΎ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ подпись ΠΈΠ»ΠΈ Ρ€Π°ΠΌΠΊΡƒ - Π·Π°Π²Π΅Ρ€Π½ΠΈΡ‚Π΅ всё Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€.

JS Ρ‚ΡƒΡ‚ Π½Π΅ Π½ΡƒΠΆΠ΅Π½ - всё Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° чистом CSS!

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ этот эффСкт Π½Π° свой сайт ΠΈ подСлись Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠΌ! А Ссли Ρ…ΠΎΡ‡Π΅ΡˆΡŒ Ρ€Π°Π·Π±ΠΎΡ€ Π΄Ρ€ΡƒΠ³ΠΈΡ… web-Ρ„ΠΈΡˆΠ΅ΠΊ - пиши Π² коммСнтариях, Π’ΠΈΠΌ всСгда Π½Π° связи 🐒🎧

#HTML #Frontend