Так вже вийшло, що пишу статті, поралельно верстаючи новий дизайн. думаю, це оптимальний варіант, так як є можливість відразу розбиратися з кодом, який там присутній, ніж потім шукати все серед досить великого файлу.
І сьогодні наша мета буде збільшення зображень при наведенні миші, без використання j # тисячу сімдесят два; vascript. Все буде робитися за допомогою CSS3.
Давайте трохи відійдемо від опису статті, так як цей приклад можна застосовувати не тільки до зображень, але і до різного роду блоках. Плавне збільшення дозволить акцентувати увагу на вашому блоці. Наприклад, це видно на прикладі статей на даному блоці, хоча, тут відразу кілька ефектів. Проте, вони акцентуються на інформації, залучаючи користувача.
Отже, давайте створимо блок.
Властивість overflow управляє відображенням змісту блокового елемента, якщо воно виходить за область заданих розмірів. У нашому випадку, hidden говорить про те, що overflow прихований. Якщо ми не поставимо overflow, то при наведенні зображення буде виходить за задані рамки. Це може стати в нагоді в різних випадках, але не в нашому. Хоча, цілком не погано виглядатиме в галереї.
Width і height - ширина і висота. Задаються в завісісмості від ваших потреб. Це розміри, в межах яких буде збільшуватися зображення.
Давайте задамо стилі для нашої анімації.
Властивість transition задає час, а так же напрямок трансформації. transition all каже, що трансформація відбувається з усіма сторонами. Так само може бути top (верх), bottom (низ) і т.д. 1s вказує на час трансформації. У нашому випадку, це 1 сек. Якщо хочете прискорити анімацію - зменшіть час. ease-out в властивості transition означає, що анімація починається швидко, і до кінця сповільнюється.
Властивість transform дозволяє трансформувати елемент. За допомогою даного властивості ви можете його масштабувати, обертати, зрушувати, нахиляти. Функція scale масштабує елемент по горизонталі і вертикалі. 1 - 100%. Менше одного для зменшення. Більше одного - збільшення.
Ось і весь урок, як зробити плавне збільшення зображення. Як бачите, все досить наочно і просто.
Шановні читачі! Якщо ви виявили в тексті помилку, не полінуйтеся, виділіть слово і натисніть CTRL + Enter. Зробимо мову чистішою!
Новини схожі на: Плавне збільшення зображення на чистому CSS3
Способи підключення ФАІ # 774; ла стиль # 774; CSS
Сьогодні ми поговоримо про CSS3, а точніше, про адаптивної верстці. Про саму адаптивну верстку ми говорили в минулій статті. У цій статті ми розглянемо за допомогою яких інструментів можна CSS3 можна зробити подібну розмітку. Насправді є кілька варіантів установки подібних правил, і кожен
Способи підключення файлу стилів CSS
Сьогодні ми поговоримо про CSS3, а точніше, про адаптивної верстці. Про саму адаптивну верстку ми говорили в минулій статті. У цій статті ми розглянемо за допомогою яких інструментів можна CSS3 можна зробити подібну розмітку.
Deposit Images - зароби на зображеннях
Багато блогери, сайтобудівники, та й просто користувачі викладають в мережу величезну кількість зображень і фотографій. І ось тепер з'явився сервіс, який дозволяє не просто зберігати свої зображення не на своєму хостингу (де, як правило, не така велика кількість вільного місця), а на
Kasseler CMS
Kasseler - ще одна відмінна система для побудови сайту. В останній версії Kasseler були зроблені глобальні зміни, тому що має загальну структуру модулів з версіями класу Full. Так само ядро класу Lite і Full стали ідентичні.