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

В этой публикации я покажу как делаются простые 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 — Увеличение.

Прежде всего нужно подготовить картинку соответствующего размера. В примере использован эффект увеличения, значит возьмем картинку немного больше нашего блока. Если блок мы задали 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 — Уменьшение.

Размеры подготавливаемой картинки 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 — Вертикальный план.

/*Вертикальный план*/
.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 для картинок»?

Самая свежая информация перетяжка сидений автомобиля в спб цены у нас. Магазин ювелирных изделий каталог обручальные кольца grafkolcov.ru.

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

Создание Video Background HTML 5

В данной статье идет речь о создании video background — фоновой видео заставки HTML 5 веб страницы

Оформление текста в HTML — Выноски Callout

Публикую несколько примеров оформления текста в HTML. Выноски Callout нужны для заострения внимания читателя…

Системные шрифты, подключение шрифтов к сайту

Шрифты — это неотъемлемая и очень важная часть дизайна сайта, подчеркивающая его индивидуальность. В…