В этой статье подготовлены 8 интересных эффектов для изображений, которые Вы можете применить на своем сайте. Каждый эффект состоит из HTML разметки и стилей CSS. Вам остается только скопировать и добавить в свой исходный код. Чтобы увидеть их в действии наведите курсором на картинку или посетите демонстрационную страницу.
Установка
Перед тем, как приступить к созданию отдельных демонстраций, вот кусочек CSS, который устанавливает базовые правила для изображений.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
background : url('bg.jpg') #797979;
}
.pic {
border: 10px solid #fff;
float: left;
height: 200px;
width: 200px;
margin: 20px;
overflow: hidden;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}
border-box означает, что высота и ширина блоков с изображениями будут включать в себя значения полей и границ, а класс pic является общим для всех изображений. Ограничивает высоту, ширину, задает границу и тень. И что самое важное содержимое (т.е. изображения) этого блочного элемента, будет отображаться только внутри, за пределы не выйдет свойство overflow : hidden.
Масштабирование и панорамирование
Наша первая группа эффектов включает в себя использование нескольких трюков с масштабированием и перемещением изображения.
Увеличение
Для начала мы сделаем так, что когда пользователь наводит курсор на изображение фотография увеличивается, оставаясь в пределах своих границ. Вот HTML:
<div class="grow pic">
<img src="http://www.s-sd.ru/files/hover-effect/9.jpg" alt="portrait">
</div>
Как Вы можете видеть здесь мы используем два класса pic и grow. Базовый pic который задает размер изображения и границы. Теперь давайте посмотрим, CSS.
/*GROW*/
.grow img {
height: 200px;
width: 200px;
-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: 300px;
height: 300px;
}
Само по себе изображение 300х300px, но мы его подгоняем под размеры блока 200x200px и указываем transition свойство, означающее что другие свойства будут изменяться плавно в течении одной секунды. Так как нам необходимо увеличение изображение то при наведении оно возвращается к исходным размерам.
Уменьшение
Это абсолютно противоположный эффект. Изначально изображение в полноценном размере, а при наведении уменьшается до 300х300px. таким образом создается эффект сжатия.
<div class="shrink pic">
<img src="4.jpg" alt="city">
</div>
/*SHRINK*/
.shrink 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;
}
.shrink img:hover {
width: 200px;
height: 200px;
}
Горизонтальное смещение
Данный эффект не манипулирует размерами изображения, но зато меняет позицию в блоке. При наведении картинка смещается горизонтально в сторону.
<div class="sidepan pic">
<img src="8.jpg" alt="kick">
</div>
Изображение имеет размер 400х200px.
/*SIDEPAN*/
.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;
}
Все с помощью того же свойства transition мы плавно меняем, но уже свойство margin. При наведении смещаем картинку влево на 200px.
Вертикальное смещение
Аналогичен предыдущему и его можно было бы не приводить. Но все таки следуют продемонстрировать как можно применить такой эффект, точнее с каким изображением.
<div class="vertpan pic">
<img src="5.jpg" alt="climb">
</div>
Изображение имеет размер 200х500px.
/*VERTPAN*/
.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;
}
Теперь смещаем вверх на 200px.
Трансформация
Повышаем сложность создаваемых эффектов. Начнем с простого наклона, а дальше больше. Использоваться будет свойство transform — еще эффект с помощью transform.
Наклон
Замечательный эффект. Небольшой поворот изображения в результате наведения курсора мыши.
<div class="tilt pic">
<img src="5.jpg" alt="car">
</div>
/*TILT*/
.tilt {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.tilt:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
Все что нужно было, так это повернуть изображение на десять градусов. Просто и эффективно! Обратите внимание, что эффект нацелен на сам класс, а не на изображение.
Поворот
Когда пользователь наводит на изображение, последнее начинает вращаться. Пока изображение вращается, блок див трансформируется в круг. В результате выходит супер эффект.
<div class="morph pic">
<img src="15.jpg" alt="beach">
</div>
/*MORPH*/
.morph {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.morph:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
Суть заключается в том, что для классы morph вращается на 360 градусов при наведении курсора мыши. В это же время, border-radius принимает значение 50%, в результате чего получается круг.
Фокусировка
Вот еще один подобный эффект. Однако вращения не будет просто изображение закруглим и увеличим толщину границы.
<div class="focus pic">
<img src="16.jpg" alt="cricket">
</div>
/*FOCUS*/
.focus {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.focus:hover {
border: 10px solid #b8b8b8;
border-radius: 50%;
}
При наведении курсора, увеличиваем толщину границы с 10 до 70px, и как в предыдущем примере border-radius в 50%.
Прозрачность
Наверное самый распространенный способ манипуляции с цветами изображения, так это добавление прозрачности. Теперь и с помощью CSS3. Вынес его в отдельный раздел в связи с одной особенностью, о ней ниже.
<div class="opacity pic">
<img src="1.jpg" alt="soccer">
</div>
/*OPACITY*/
.opacity img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.opacity img:hover {
opacity: 0.25;
}
Значение прозрачности в фильтре задается опять таки процентами, где 100% это не прозрачно, а 0% полностью прозрачно. Особенность использования прозрачности заключается в том, что его можно использовать как обычное свойство CSS, а не только как фильтр. Соответственно и работает такой эффект во всех браузерах, даже в IE9+.
img {
opacity: 0.5;
}При таком варианте использование значение берется из интервала от 1 до 0.
