image effect css3

Image Hover Effects Css3, стильные изображения с эффектом CSS3


 Продолжаем разбирать самые интересные и полезные плагины для сайта wordpress. Сегодня вы узнаете как создавать очень стильные изображения с эффектом CSS3 при наведении курсора мыши. Вы сможете настроить эффект при наведении, указать цвет, прозрачность, заголовок и подзаголовок, размер, бордюр и т.д. 20 готовых эффектов, просто выберите эффект и всё готово !

 

effect css3 image site

 

 Установить плагин Image Hover Effects Css3 вы сможете прямо из админ-панели wordpress. Перейдите на страницу: ПлагиныДобавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

 

плагин wordpress

 

 После установки и активации плагина, перейдите на страницу: Hover EffectsAdd New Hover Effect. Здесь вы можете настроить основные параметры плагина. (Если вы хотите создать несколько изображений с эффектом, то нажмите под настройками на кнопку – Add New)

 

– Paste URL or use from Media, нажмите на кнопку – Media, чтобы загрузить изображение, на которое вы будете накладывать эффект.

– Title, укажите текст для атрибута title.

– Alternate Text, здесь можно указать текст для атрибута alt изображения.

– Caption Title, укажите здесь заголовок, который будет отображаться на изображении.

– Caption Title Font Size, укажите размер шрифта для заголовка в пикселях.

– Caption Text, укажите здесь текст, который будет отображаться под заголовком.

– Caption Text Font Size, укажите размер шрифта подзаголовка в пикселях.

– Content Color, здесь можно указать цвет заголовка и подзаголовка.

– Title Background Color, здесь можно указать цвет фона заголовка.

– Background Color, цвет фона на котором отображаются заголовок и подзаголовок.

– Border Width, ширина бордюра.

– Border Color, цвет бордюра.

– Link To, можно указать ссылку при нажатии.

– Link Target, по умолчанию ссылка открывается в новом окне.

– Hover Style, здесь можно выбрать стиль при наведении.

 Style Type, здесь можно выбрать тип стиля.

– Caption Direction, здесь можно выбрать направление появления стиля.

 

настройки плагина

 

 Далее, укажите вверху заголовок для созданного эффекта. Справа в виджете нажмите на кнопку – Опубликовать. Скопируйте шорткод, который нужно вставить на страницу или в запись.

 

создание эффекта

 

 Скопируйте шорткод, вставьте его на страницу или в запись, обновите страницу, на сайте будет отображаться готовое изображение с эффектом.

 






info-effect.ru
Image Hover Effects Css3, стильные изображения с эффектом CSS3 обновлено: Июль 17, 2016 автором: Илья Журавлёв

Комментарии

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Нажимая на кнопку Отправить комментарий, вы соглашаетесь с Политикой конфиденциальности и Пользовательским соглашением сайта info-effect.ru



Обратная связь

Политика конфиденциальности - Пользовательское соглашение

Стрелка вверх