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


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

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

Прежде всего предлагаю посмотреть эти hover эффекты вживую.

 

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

.pic {
border: 10px solid #fff; /*--рамка 10 пикселов сплошная белая--*/
float: left; /*--картинки слева,текст обтекает--*/
height: 300px; /*--размер, высота--*/
width: 300px; /*--размер, ширина--*/
margin: 20px; /*--внешние отступы--*/
overflow: hidden; /*--наполнение блока картинкой--*/
cursor: pointer; /*--активный курсор при наведении--*/
-webkit-box-shadow: 5px 5px 5px #111; /*--тени блока для браузеров--*/
-moz-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}

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

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

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

В итоге в таблицу стилей 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="grow pic">
<img src="http://filwebs.ru/hover-effekty-css-dlya-kartinok/#" alt="портрет"/>
</div>

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

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

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

Размеры подготавливаемой картинки 400 на 400 пикселов.

/*Уменьшение*/
.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="shrink pic"><img src="http://filwebs.ru/hover-effekty-css-dlya-kartinok/#" alt="город" /></div>

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

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

эффекты для картинокНу что, дальше становится все интереснее и интереснее. Довольно таки интересный горизонтальный план, с минимумом css кода, как пример hover эффекта картинки при наведении курсора. Легкий код. Кстати, вот он. Но прежде нужно подготовить картинку. Так как общий блок у нас 300 на 300, по логике возьмем картинку 600 пикселов по ширине и 300 пикселов по высоте.

/*Горизонтальный план*/
.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="sidepan pic"><img src="http://filwebs.ru/hover-effekty-css-dlya-kartinok/#" alt="удар" /></div>

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

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

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

/*Вертикальный план*/
.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="vertpan pic"><img src="http://filwebs.ru/hover-effekty-css-dlya-kartinok/#" alt="скалолаз" /></div>

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


Похожие по Тегам статьи


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

  1. Надежда

    Интересные эффекты, надо будет попробовать, это все в стили css надо добавлять или как? А HTML разметку куда? У меня сайт на вордпресс

    1. Егор Автор записи

      Стили в таблицу СSS. А HTML код добавлять в редакторе в режиме «текст» и указывать путь к картинке, в стилях выравнивание по левому краю.

      1. Алексей

        Кстати такие эффекты способны хорошо украсить вашу страницу и сделать ее более живой. Из таких эффектов сейчас собирают некоторые темы на вордпресс. Автору побольше подобных публикаций пожелать. Спасибо.