Лучшие CSS эффекты при наведении курсора на изображение
- Получить ссылку
- Электронная почта
- Другие приложения
Автор:
Игорь Петренко
Все привет! Для начала, все с праздником! Недавно прочитал материал Джошуа Джонса об эффектах при наведении курсора и сразу же решил адаптировать его материал для русскоязычный читателей, ведь он пригодиться многим веб-мастерам.
В статье можно узнать о десяти лучших CSS эффектах для ваших изображений. Примечательно то, что не нужно никаких jqeury и тем более javascript, для того чтобы сделать красивый эффект - всё работает при помощи разметки CSS 3.
Демонстрацию всех эффектов можно посмотреть кликнув по этому предложению
Создаем класс для всех изображений
Изображение должны обязательно принадлежать классу pic. Он содержит информацию об расположении блока с изображением - float; о высоте и ширине блока - height и width; тип отображение, если изображении больше, чем размер блока - overflow, а также информацию об рамке - border, тени - box-shadow и отступе - margin. Полный CSS класса pic будет выглядеть так:.pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111; box-shadow: 5px 5px 5px #111; }
Масштабирование и панорамирование
Увеличение
Теперь к самим эффектам. Например, в эффекте "Увеличение", HTML - код будет выглядеть так:
HTML
<div class="grow pic"> <img border="0" src="//1.bp.blogspot.com/-13VSZrmIQyw/UhhoDaEgC9I/AAAAAAAAGIs/oxBNePz_aVo/s000/girl.jpeg" /> </div>
где, class="grow pic" выполняет подключение к обязательному классу pic и к своему эффекту grow. CSS будет иметь вот такой вид:
CSS
/*Увеличение*/ .grow img { height: 300px; width: 300px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .grow img:hover { width: 400px; height: 400px; }
Сокращение в объеме
HTML
<div class="shrink pic"> <img src="//4.bp.blogspot.com/-3M7MgqrqRfw/UhhoB6E-OwI/AAAAAAAAGIU/8w54W8rZLns/s000/city.jpeg" alt="city"> </div>
CSS
/*Сокращение в объеме*/ .shrink img { height: 400px; width: 400px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .shrink img:hover { width: 300px; height: 300px; }
Боковое панорамирование
HTML
<div class="sidepan pic"> <img src="//1.bp.blogspot.com/-sTY94AqZaPs/UhhoFqoQyMI/AAAAAAAAGI0/SmnsCkw7SgU/s000/kick.jpeg" alt="kick"> </div>
Эффект бокового панорамирования должен применяться к прямоугольным изображениям горизонтального вида, потому что при наведении изображение будет делать сдвиг вправо.
CSS
/*Боковое панорамирование*/ .sidepan img { margin-left: 0px; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margin 1s ease; transition: margin 1s ease; } .sidepan img:hover { margin-left: -200px; }
Вертикальное панорамирование
HTML
<div class="vertpan pic"> <img src="//1.bp.blogspot.com/-OCi_1Jb2nN8/UhhoCRChZNI/AAAAAAAAGIc/ndLJqrMbOOU/s000/climb.jpeg" alt="climb"> </div>
А вот эффект вертикального панорамирования применяться к прямоугольным изображениям вертикального вида, потому что при наведении изображение будет делать сдвиг вниз.
CSS
/*Вертикальное панорамирование*/ .vertpan img { margin-top: 0px; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margin 1s ease; transition: margin 1s ease; } .vertpan img:hover { margin-top: -200px; }
Преобразования
Наклон
HTML
<div class="tilt pic"> <img src="//4.bp.blogspot.com/-3QfVDLVQKyg/UhhoBMAY5aI/AAAAAAAAGII/nCseBq08Kwg/s000/car.jpeg" alt="car"> </div>
CSS
/*Наклон*/ .tilt { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .tilt:hover { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); }
Округление
HTML
<div class="morph pic"> <img src="//1.bp.blogspot.com/-iQW0XOC57c8/UhhoGlXB43I/AAAAAAAAGJA/5tljT58aFRE/s000/sea.jpeg" alt="beach"> </div>
CSS
/*Округление*/ .morph { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .morph:hover { border-radius: 50%; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
Фокусирование
HTML
<div class="focus pic"> <img src="//2.bp.blogspot.com/-lUMr0fZGQs4/UhhoAicL2AI/AAAAAAAAGIA/TQ_nh1RT-7s/s000/baseball.jpeg" alt="baseball"> </div>
CSS
/*Фокусирование*/ .focus { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .focus:hover { border: 70px solid #000; border-radius: 50%; }
Фильтры Webkit
Расплывшиеся очертания
HTML
<div class="blur pic"> <img src="//2.bp.blogspot.com/-5uNuklpf00g/UhhoACTie0I/AAAAAAAAGH8/V0MvkAqt-2E/s000/airplains.jpeg" alt="plane"> </div>CSS
/*Расплывшиеся очертания*/ .blur img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .blur img:hover { -webkit-filter: blur(5px); }
Обесцвечивание
HTML
<div class="bw pic"> <img src="//2.bp.blogspot.com/-4M2ucdYdH0k/UhhoGb30DGI/AAAAAAAAGI8/oJx9BlfFBfY/s000/sea2.jpeg" alt="sea"> </div>CSS
/*Обесцвечивание*/ .bw { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .bw:hover { -webkit-filter: grayscale(100%); }
Полировка / яркость
HTML
<div class="brighten pic"> <img src="//2.bp.blogspot.com/-54vP-i9Cgxc/UhhoC02MU1I/AAAAAAAAGIg/sh8WYeYTT2o/s000/dj.jpeg" alt="sea"> </div>
CSS
/*Полировка*/ .brighten img { -webkit-filter: brightness(-65%); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .brighten img:hover { -webkit-filter: brightness(0%); }
На этом всё. Жду Ваших вопросов в комментариях. Удачных всем выходных - пока ;)
Ах да, друзья, чуть не забыл! Я недавно завел личный канал в Telegram, где делюсь своими мыслями по поводу продуктивности, отношений и жизни. Не блогерством единым живем. Буду рад каждому ;)
- Получить ссылку
- Электронная почта
- Другие приложения
Комментарии
Популярное
Установка и настройка модема Huawei HG532e (+ мини-обзор)
Автор:
Игорь Петренко
Всем привет! Сегодня у меня по всему дому хаос и многовластие! Вай-Фай, короче появился.
Иногда даже лень сесть за компьютерный стол, чтобы посмотреть новости, почитать Твиттер и тд. Но нужно быть в тренде (или просто убить время)! Поэтому вай-фай на весь дом - то что нужно, тем более что ранее у меня появился планшет, так что есть откуда по серфить в Интернете!
Ну что ж, не будем терять время и давайте установим и настроим модем Huawei HG532e!
А начну я с обзора содержимого коробки, которое я получил в отделении Укртелекома. Вот так, собственно, выглядит коробка от модема.
Да, сделано в Китае. Но, практически, вся электроника делается в Поднебесной, поэтому, надеюсь, это модем прослужит мне долго.
Очень полезная брошюра - "Инструкция по использованию".
А вот и самое интересное - содержимое коробки! Что туда входит?
1. Модем
2. Блок питания
3. Сплиттер
4. Телефонный кабель RJ-11 (2шт.)
5. Ethernet кабель RJ-45
6. Инструкция пользователя
7. Диск
8. Гарантийный талон (его нет…
Иногда даже лень сесть за компьютерный стол, чтобы посмотреть новости, почитать Твиттер и тд. Но нужно быть в тренде (или просто убить время)! Поэтому вай-фай на весь дом - то что нужно, тем более что ранее у меня появился планшет, так что есть откуда по серфить в Интернете!
Ну что ж, не будем терять время и давайте установим и настроим модем Huawei HG532e!
А начну я с обзора содержимого коробки, которое я получил в отделении Укртелекома. Вот так, собственно, выглядит коробка от модема.
Да, сделано в Китае. Но, практически, вся электроника делается в Поднебесной, поэтому, надеюсь, это модем прослужит мне долго.
Очень полезная брошюра - "Инструкция по использованию".
А вот и самое интересное - содержимое коробки! Что туда входит?
1. Модем
2. Блок питания
3. Сплиттер
4. Телефонный кабель RJ-11 (2шт.)
5. Ethernet кабель RJ-45
6. Инструкция пользователя
7. Диск
8. Гарантийный талон (его нет…
Страница обратной связи для блогов на платформе Blogger \ Blogspot.com
Автор:
Игорь Петренко
Добрый день, уважаемые читатели! Очень важно общаться с читателями, и по этому нужно на блоге иметь такую страничку, откуда Вам могли бы писать на почту. Ведь не факт, что все захотят копировать Ваш адрес, вводить в поисковою строку название своего почтового веб-клиента, и писать Вам письмо. Всё это, попросту, отобьет желание у читателя. Давайте же упростим жизнь всем, создадим форму обратной связи для Вас и Ваших читателей!
Виджет профиля Instagram на ваш сайт/блог
Автор:
Игорь Петренко
Приветствую!
Многие из Вас знают, что такое Instagram. Для тех кто не знает, то я кратко расскажу.
Instagram - кроссплатформенное мобильное приложение для публикации квадратных фото (как в фотоаппаратах Polaroid) с применением эффектов. Создали Инстаграм в 2010 году Кевин Систром и Майк Кригер. В 2012 сервис был продан в Facebook за $300 млн + 20 млн акций компании.
А теперь о главной теме заметки. Есть три хороших способа (сервиса) для вставки вашего Инстаграм-профиляна Ваш сайт или блог.
Многие из Вас знают, что такое Instagram. Для тех кто не знает, то я кратко расскажу.
Instagram - кроссплатформенное мобильное приложение для публикации квадратных фото (как в фотоаппаратах Polaroid) с применением эффектов. Создали Инстаграм в 2010 году Кевин Систром и Майк Кригер. В 2012 сервис был продан в Facebook за $300 млн + 20 млн акций компании.
А теперь о главной теме заметки. Есть три хороших способа (сервиса) для вставки вашего Инстаграм-профиляна Ваш сайт или блог.
как щедро кто-то перепутал img и pic в кодах )))))
ОтветитьУдалитьнаверное, это и была адаптация? ;-))
некая адаптация в коде и была, но вроде бы ничего не попутано и всё работоспособно)
Удалитьили у Вас возникли проблемы?
Для фокусировки в hover желательно вписать уменьшение высоты и ширины на удвоенную ширину border (например: ширина и высота изображения = 300. в hover нужно вписать width:160px; height:160px;). Поскольку без этого размен изображения увеличивается на удвоенную ширину border (например: ширина и высота изображения = 300. в hover - 440 рх.).
ОтветитьУдалитьСпасибо за статью! Для Wordpress к стати плагин есть чтобы подобные анимации делать. Вот видеообзор https://www.youtube.com/watch?v=Wtd2e5L47pc
ОтветитьУдалить