Этот метод я применил у себя в блоге. Когда пользователь наводит на миниатюру любой записи, она у него плавно увеличивается. Вроде ничего сложного, а смотрится уже интереснее. Делается это все на чистом CSS3 и довольно просто. Вы можете увидеть этот эффект на этом сайте, на главной странице.
Плавное увеличение картинки на чистом CSS3
Для начала, нам нужно подготовить простую разметку в html для наших картинок.
|
1 2 3 4 5 6 7 8 9 |
<div> <img src="http://miriadna.com/desctopwalls/images/max/Yellow-sunset-and-fog.jpg" class="transform"/> </div> <div> <img src="http://cdn.mntm.me/0b/71/58/Maroon_Bells-Aspen-Colorado-0b7158fa70b14b94a4445861d168b7e5.jpg" class="transform"/> </div> <div> <img src="https://pic.rutube.ru/video/96/73/967380b388074c00b1dcd0d5aba34324.jpg?size=l" class="transform"/> </div> |
Нужно теперь нашим div’ам и картинкам задать стиль:
|
1 2 3 4 5 6 7 8 9 10 11 |
div{ width:520px; height:280px; border: 3px solid grey; overflow:hidden; margin:5px; } img{ width:520px; height:280px; } |
Мы создали обычный блок, размером 520 x 280 пикселей. Размер блока и размер изображения должны совпадать. Если ваша картинка больше или меньше блока, то его нужно подогнать под размер картинки. И обязательно, мы добавили для блока правило overflow:hidden;. Оно нужно для того, что бы когда наше изображение увеличивалось, оно не выходило за рамки.
Теперь зададим правила для изображения через класс transform(Вы можете назвать свой класс как угодно).
|
1 2 3 4 5 6 |
.transform{ transition: all 1s ease-out; } .transform:hover{ transform: scale(1.2); } |
Анимация происходит с помощью параметров transition и transform в CSS3. На всю анимацию у нас уходит одна секунда. Если вы хотите сделать что бы ваша картинка увеличивалась быстрее или медленнее, то вам нужно изменить значение времени, в зависимости от того, что вам надо.
Пример
В примере картинка увеличивается 1.2 раза. Вы можете его менять, в зависимости от того, что вам надо.
Я надеюсь вам помогла эта запись.
Удачи.
Спасибо! Простое и понятное решение 😉
Рад что смог вам помочь ?
Очень простое, но элегантное решение. Честно говоря, не совсем понимаю зачем это реально нужно, но «потыкалась» по главной и поняла, что в это что-то есть. Картинка как-будто отвечает тебе, не знаю как лучше выразиться. Вот теперь сижу и думаю, может и мне такое надо 🙂
Интересный мануал, вообще, если можешь сделать что-то с использованием CSS — это уже поднимает самооценку:) Пошел изучать, возможно сделаю и у себя на одном из сайтов что-либо подобное
Оригинальное решение. Небольшая доработка, а как хорошо оживляет сайт. Вопрос стал ребром: Самому делать или обратится к программистам? Ведь все доступно описано. Буду пробовать.
Спасибо за подсказку решения, давно искал нечто подобное для своего блога, но самостоятельно не удавалось добиться нужного результата. Теперь буду разбираться с вашим вариантом. Действительно, оригинально!