Меня уже не в первый раз спрашивают: как ты сделал увеличивающиеся и поворачивающиеся картинки ? Ответ прост: это магия CSS3 — и в этой статье я расскажу, как она работает. Постараюсь не умничать и написать интересно. А вы помогайте мне, помогайте.
Да, это магия CSS3, состоящая из transition и transform свойств.
Вот пример, HTML и CSS код:
Чтобы не заморачиваться с кросбраузерностью:
Figure img { -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s ease-out; } figure img:hover { -webkit-transform: rotate(-3deg) scale(1.1); transform: rotate(-3deg) scale(1.1); -webkit-transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; }
Разберём HTML вставку картинки
Для изменения картинки при наведении курсора, HTML-код не имеет особого значения. Просто это правильно и оптимально, соответствует HTML5 и хорошо для поисковой оптимизации.
- figure — контейнер фигуры (диаграммы, картинки и&nbap;т.&nbap;д.);
- figcaption — заголовок контейнера figure и около-картиночный текст (ну а как это ещё обозвать?).
- img — отображаемая картинка с адресом миниатюры в атрибуте src и кратким описанием (набором ключевиков) в alt ;
- a — ссылка на большую картинку с кратким описанием (набором ключевиков) в атрибуте title .
Главное:
- древние браузеры не воспринимают тег figure , для них он объявляется через JavaScript;
- новые браузеры добавляют тегу figure CSS-свойства по умолчанию, их я обнуляю.
Разберём CSS трансформацию картинки
В рассматриваемом примере у картинки два состояния :
- figure img — начальное (по умолчанию);
- figure img:hover — при наведении на неё курсора.
CSS-свойство transform
CSS-свойство transform появилось только в CSS3 и задаёт одну или несколько (разделённых пробелом) функций трансформации элемента или none — отмена.
Примечание: для поддержания кроссбраузерности , укажите варианты transform с префиксами: -webkit , -moz , -ms и -o . При желании укажите и свойства -ms-filter (для IE8+) и filter (IE 6 и 7) с заданием матрицы трансформации через progid:DXImageTransform.Microsoft.Matrix() , но этого я разжёвывать не буду.
В приведённом примере использовались две функции трансформации:
- rotate() — задаёт угол поворота элемента относительно точки трансформации. Например: transform: rotate(-3deg) — поворот элемента против часовой стрелки на 3 градуса;
- scale() — задаёт масштаб элемента по горизонтали и вертикали. Например: transform: scale(1.1) — увеличит элемент на 10% .
Задавать transform для начального состояния картинки (figure img) не нужно.
CSS-свойство transition
CSS-свойство transition появилось только в CSS3 и задаёт параметры анимации: CSS-свойство перехода и/или время анимации и/или функцию анимации и/или время задержки перед анимацией .
Примечание: для поддержания кроссбраузерности, укажите варианты transition с префиксами: -webkit , -moz и -o .
В приведённом примере использовались следующие параметры:
- у картинки изменяется CSS-свойство transform (учитывайте префиксы!);
- время (скорость) анимации составляет 0.3s (секунды);
- используется функция анимации ease-out — анимация начинается быстро, к концу замедляется;
- время задержки перед анимацией составляет 0s (секунд), т. е. отсутствует и этот параметр можно не указывать.
Полезные CSS фишки
Для контейнера figure я задаю следующие CSS-свойства:
- background: #ddd — фоновый цвет, так картинка отделяется от контента;
- text-align: center — позиционирование текста по центру (не забываем, картинка — строковый элемент). Заодно и текст в figcaption центрируется;
- margin: 1em -20px — внешний отступ, сверху и снизу как у абзаца (тег p ) — 1em , а слева и справа он «вылазит» за область родительского блока;
- padding: 10px 0 — внутренний отступ, т. е. только сверху и снизу.
Чтобы картинка (при изменении) не вылезала за пределы контейнера figure, задайте контейнеру CSS-свойство: overflow: hidden .
Лажа в том (а куда без неё?), что анимация ест очень много ресурсов. На десктопе — худо-бедно, но допустимо; на мобильных — не рекомендую.
Доброго времени суток, друзья! Это очередная статья, написанная по просьбе одного из читателей моего блога. Сегодня мы реализуем возможность отображения картинки при наведении курсора мыши на ссылку. Зачем это может быть нужно? Все очень просто, таким способом можно сохранить пространство на сайте и вместе с тем оживить ссылки.
Как известно, реализовать всплывающие картинки можно при помощи jQuery, CSS, а также HTML. В сегодняшней статье я выложу готовый код этого эффекта, а также приведу несколько наглядных примеров. Каждый скрипт довольно простой, создан средствами CSS+HTML. Не стану вас больше томить и приведу готовые решения!
Всплывающая картинка при наведении
a.сайт-ssilka:hover+div
Давайте я вкратце объясню главные моменты. Дабы вывести всплывающее изображение нужно обратиться к тегу
с атрибутом src и после знака равно в кавычках прописать путь к изображению, предварительно закачав его в корневую папку сайта.
Тег <а> с обязательным параметром href отвечает за создание и отображение ссылки (в моем примере это текст).
В случае, если элементы сайта сдвинулись, можно задать изображению ширину и высоту, используя свойство width и heigh . Параметры задаются в пикселях.
Атрибут alt позволяет поисковым механизмам более точно распознать, что изображается на картинке.
Для большей наглядности я выделил ту часть кода, которую вы вероятнее всего захотите изменить.
Всплывающий текст при наведении на ссылку
a.сайт-ssilka:hover+div
Смелее!!! Наведи на меня курсор!
Как можно увидеть с примера при наведении на текст всплывает текстовая подсказка.
Исчезновение изображения при наведении на ссылку
a.сайт-ssilka:hover+div
Смелее!!! Наведи на меня курсор!
Для добавления определенного вышеприведенного эффекта достаточно скопировать подходящий вам код и вставить его в текстовый редактор. Таким образом, ссылку со всплывающим/исчезающим изображением можно прописать в любом месте статьи.
Важный момент! Каждый из представленных скриптов не вредит валидности сайта.
Не менее удобной считаю реализацию поставленной задачи путем добавления специального скрипта в файл стилей вашего шаблона, который, как правило, называется style.css.
Всплывающая картинка CSS
position: relative;
Thumbnail:hover{
Thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #3d3d3d;
border: 1px solid white;
visibility: hidden;
text-decoration: none;
border-radius: 4px 4px 4px 4px;
Moz-border-radius: 4px 4px 4px 4px;
Webkit-border-radius: 4px 4px 4px 4px;
Thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
Thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
left: 60px; /*position where enlarged image should offset horizontally */
Для вывода всплывающего окна при наведении на ссылку, в текст следует вставить следующую ссылку:
Помимо этого ссылку со всплывающей картинкой можно вставить в определенную часть вашего шаблона. Для этого следует внести нижеуказанный код в файл index.php. Это файл, определяющий визуальное расположение элементов сайта.