ДОСТИГНУТО:

01.11.2016-300 страниц в индексе Google;
19.01.2017-300 страниц в индексе Яндекса;
03.02.2017-40 ТИЦ;
05.02.2017- сайт принят в DMOZ каталог;

Простые hover эффекты css для картинок

.

hover2Простые hover эффекты css для картинок

Всем огромный привет! Рад, как впрочем и всегда, видеть Вас на страницах своего авторского блога!

В этой публикации я покажу как делаются простые hover эффекты css для картинок, принцип их работы. Для понимания процесса создания которых приведу несколько примеров. К тому-же все эти коды можно будет легко скопировать и применить у себя в проекте.

Все hover эффекты css для картинок, приведенные ниже проверены на работоспособность в популярных браузерах.

Итак, прежде всего нам нужно создать общие базовые стили, которые будут применяться ко всем эффектам картинок. Не бойтесь экспериментировать, добавляйте или изменяйте своиства класса. Даже давайте я внесу в исходник комментарии. Потом, применив у себя, можно удалить комментарии или можно оставить как есть.

Самое основное, что мы задали фиксированную ширину и высоту нашему блоку, за рамки которого не будет вылазить наша картинка при применении к ней hover эффектов.

Нover эффект css для картинок №1 — Увеличение.

h1Прежде всего нужно подготовить картинку соответствующего размера. В примере использован эффект увеличения, значит возьмем картинку немного больше нашего блока. Если блок мы задали 300 на 300 пикселов, то картинку нужно взять к примеру 400 на 400 пикселов.

В итоге в таблицу стилей css нам нужно добавить такой код, естественно не забывайте про общий для всех примеров самый первый отрывок кода.

Вот непосредственно сам код:

Ну а вот и HTML разметка для данного примера, ставьте ее в статью, еще куда, на ваше усмотрение.

К картинкам можно добавить любые ссылки!
Дальше все делается по аналогии первого примера, только меняются размеры подготавливаемой картинки и немного меняется css.

Нover эффект css для картинок №2 — Уменьшение.

h2На этот раз необходимо добавить изображение с размерами 400 на 400 пикселей.

Прежде чем перейдем к CSS коду и HTML разметке для достижения данного HOVER эффекта, рекомендую вам ознакомиться с еще одной схожей статьей, в которой показаны также очень классные hover эффекты для изображений:

Легкие hover эффекты css для картинок

Ну что-же, идем далее!

CSS код для второго эффекта:

HTML разметка:

Как видно из примера этого hover эффекта, поменялось лишь название класса и свойство img:hover, наоборот, при наведении на картинку курсора, она меняет свой размер на меньший.

Нover эффект css для картинок №3 — Горизонтальный план.

h3Ну что, дальше становится все интереснее и интереснее?

Довольно таки интересный горизонтальный план, с минимумом css кода, как пример hover эффекта картинки при наведении курсора. Легкий код. Кстати, вот он.

Но прежде нужно подготовить картинку. Так как общий блок у нас 300 на 300, по логике возьмем картинку 600 пикселей по ширине и 300 пикселей по высоте.

CSS код:

HTML разметка:

Так-же как и во всех других примерах мы меняем лишь название класса .sidepan и меняем стиль .sidepan img:hover на margin-left: -200px;

Нover эффект css для картинок №4 — Вертикальный план.

h4Отличный hover эффект для создания вертикального плана изображения!

Лично мне очень импонирует и я использую его на многих своих сайтах написанных на языке программирования html5, который я совсем недавно начал осваивать, а уже сейчас могу смело назвать себя активным пользователем данного языка.

В связи с чем рекомендую вам посетить мою новую рубрику посвященную данному языку:

HTML5

Ну а мы продолжаем друзья.

CSS код:

HTML код:

Ну вот и все, по моему достаточно примеров, фантазируйте, добавляйте свои стили, экспериментируйте. А можете просто взять уже готовые эффекты, скопировав нужный отрывок.
Советую посмотреть схожие записи, уверен, найдете для себя что-то интересное.
— Как вам статья «Простые hover эффекты css для картинок»?

БЕРЕГИТЕ СЕБЯ!

 

 

 




лайк

Эти красотки хотят чтобы ты их жестко лайкнул и даже несколько раз твитнул!

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

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