Продолжаем украшать наши сайты и блоги красивыми эффектами.
В этой статье вы научитесь создавать красивый hover-эффект для картинок с помощью CSS-маски.
Этот эффект вы сможете использовать на своих сайтах-портфолио или интернет-магазинах.
В коде используется HTML, CSS и обычные картинки фигур для маски.
Посмотреть hover-эффект для картинок вы сможете, нажав на демонстрацию:
Как это реализовать?
Давайте все начнем постепенно.
1. Создайте для картинок папку «img» и залейте в нее картинки размерами 300 х 300 px:
2. Для эффекта будем использовать маски. В качестве масок мы будем использовать прозрачный PNG вместо «CSS Shapes». Это нужно для того, чтобы избежать недоразумений со стороны браузеров. Прозрачная картинка должна быть размерами 310 х 310px. Залейте ее в ту же папку, где лежат картинки (в папку «img»):
Фигура внутри может быть абсолютно любая, все зависит от вашей фантазии.
В СSS за добавление различных фигур отвечает вот этот кусочек кода:
/* различные фигуры */
.shape .overlay.round {
background: url(img/round.png);
}
.shape .overlay.hexagon {
background: url(img/hexagon.png);
}
.shape .overlay.pentagon {
background: url(img/pentagon.png);
}
где «.round», «.hexagon» и «.pentagon» – это название класса. При добавлении новой фигуры придумайте другой класс, например «.kybik-rybik».
«round.png», «hexagon.png» и «pentagon.png» – это картинки фигур. Если вы создадите свою фигуру с названием, например, «kybik-rybik.png», то не забудьте прописать ее в коде. В общем, при добавлении новой фигуры в СSS это будет выглядеть так:
/* различные фигуры */
.shape .overlay.round {
background: url(img/round.png);
}
.shape .overlay.hexagon {
background: url(img/hexagon.png);
}
.shape .overlay.pentagon {
background: url(img/pentagon.png);
}
.shape .overlay.kybik-rybik {
background: url(img/kybik-rybik.png);
}
Чуть бы не забыл сказать, что в картинке фигура должна быть прозрачная. Если вы не знаете, как это сделать, рекомендую почитать статью как сделать фон картинки прозрачным.
Двигаемся дальше.
3. Создайте html-файл и вставьте между тегами <body></body> вот этот кусок кода:
<div class="shape">
<a href="#" class="overlay <-- round | hexagon | pentagon -->"></a>
<div class="details">
<span class="heading">Заголовок</span>
<hr />
<p>Текст с описанием товара или краткое содержание и т.д. и т.п.</p>
<a href="/" class="button">Кнопка</a>
</div>
<div class="bg"></div>
<div class="base">
<img src="img/1.jpg" alt="" />
</div>
</div>
В строке №2 нужно выбрать класс фигуры
<-- round | hexagon | pentagon -->
например, я хочу использовать фигуру круг (round), значит, в строке №2 оставляем «round»:
<a href="#" class="overlay round"></a>
и так дальше с другими фигурами «hexagon», «pentagon». Давайте пропишем абсолютно готовый код:
<div class="shape">
<a href="#" class="overlay round"></a>
<div class="details">
<span class="heading">Заголовок</span>
<hr />
<p>Текст с описанием товара или краткое содержание и т.д. и т.п.</p>
<a href="/" class="button">Кнопка</a>
</div>
<div class="bg"></div>
<div class="base">
<img src="img/1.jpg" alt="" />
</div>
</div>
<div class="shape">
<a href="#" class="overlay hexagon"></a>
<div class="details">
<span class="heading">Заголовок</span>
<hr />
<p>Текст с описанием товара или краткое содержание и т.д. и т.п.</p>
<a href="/" class="button">Кнопка</a>
</div>
<div class="bg"></div>
<div class="base">
<img src="img/2.jpg" alt="" />
</div>
</div>
<div class="shape">
<a href="#" class="overlay pentagon"></a>
<div class="details">
<span class="heading">Заголовок</span>
<hr />
<p>Текст с описанием товара или краткое содержание и т.д. и т.п.</p>
<a href="/" class="button">Кнопка</a>
</div>
<div class="bg"></div>
<div class="base">
<img src="img/3.jpg" alt="" />
</div>
</div>
Строка №11, №24 и №37 – здесь пропишите название к картинкам. Если вы добавили новую фигуру, то следует в html-коде добавить еще вот этот код:
<div class="shape">
<a href="#" class="overlay kybik-rybik"></a>
<div class="details">
<span class="heading">Заголовок</span>
<hr />
<p>Текст с описанием товара или краткое содержание и т.д. и т.п.</p>
<a href="/" class="button">Кнопка</a>
</div>
<div class="bg"></div>
<div class="base">
<img src="img/4.jpg" alt="" />
</div>
</div>
Произошла замена в строке №2 и №11. Добавился класс «kybik-rybik», ну и еще картинка «img/4.jpg».
Наглядная схема конструкции:
- .overlay— PNG-файл маски
- .details— контент: заголовок, описание, ссылка
- .bg— слой с фоновым цветом
- .base— картинка-миниатюра портфолио
- .shape— слой, собирающий все вместе
<div class="shape">
<a href="#" class="overlay <-- round | hexagon | pentagon -->"></a>
<div class="details"></div>
<div class="bg"></div>
<div class="base"></div>
</div>
Вот готовый код к использованию:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hover-эффекты для картинок с помощи CSS-маски на BlogGood.ru</title>
<style ENGINE="text/css">
body {
background: #1b1e24;
}
.shape {
width: 300px;
height: 300px;
position: relative;
}
.shape .overlay {
display:block;
width: 310px;
height: 310px;
position: absolute;
top:-5px;
left:-5px;
-webkit-transform: scale(1,1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 0.6s;
-moz-transform: scale(1,1);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 0.6s;
transform: scale(1,1);
transition-timing-function: ease-out;
transition-duration: 0.6s;
z-index:500;
/* allow user to actually perform actions underneath this layer */
pointer-events:none;
background-repeat: no-repeat;
}
/* различные фигуры */
.shape .overlay.round {
background: url(img/round.png);
}
.shape .overlay.hexagon {
background: url(img/hexagon.png);
}
.shape .overlay.pentagon {
background: url(img/pentagon.png);
}
/* hover эффект */
.shape:hover .overlay {
-webkit-transform: scale(1.07,1.07);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 0.3s;
-moz-transform: scale(1.07,1.07);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 0.3s;
}
.shape:hover .bg {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
display:block;
}
.shape:hover .details {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
z-index:450;
display:block;
}
/* содержание styles */
.shape .bg,
.shape .details {
position: absolute;
width: 300px;
height:300px;
display:table-cell;
vertical-align:middle;
text-align:center;
top:0;
left:0;
opacity:0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
display:none;
}
.shape .bg {
background: #4b5a78;
}
.shape .details span.heading {
font-family: 'Roboto Condensed', serif;
font-size:30px;
display:block;
margin-top:70px;
color:#fff;
text-decoration:none;
}
.shape .details p {
font-family: 'Abel', sans-serif;
color:#fff;
width: 70%;
font-size:14px;
margin:0 auto;
}
.shape a.button {
padding:5px 15px;
font-family: 'Abel', sans-serif;
font-size:12px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
background: #2f3644;
text-decoration:none;
color:#fff;
display:block;
width:50px;
margin:0 auto;
text-align:center;
margin-top:15px;
}
.shape a.button:hover {
background: #fff;
color: #2f3644;
}
</style>
</head>
<body>
<div class="shape">
<a href="#" class="overlay round"></a>
<div class="details">
<span class="heading">Заголовок</span>
<hr />
<p>Текст с описанием товара или краткое содержание и т.д. и т.п.</p>
<a href="/" class="button">Кнопка</a>
</div>
<div class="bg"></div>
<div class="base">
<img src="img/1.jpg" alt="" />
</div>
</div>
<div class="shape">
<a href="#" class="overlay hexagon"></a>
<div class="details">
<span class="heading">Заголовок</span>
<hr />
<p>Текст с описанием товара или краткое содержание и т.д. и т.п.</p>
<a href="/kontakty/" class="button">Кнопка</a>
</div>
<div class="bg"></div>
<div class="base">
<img src="img/2.jpg" alt="" />
</div>
</div>
<div class="shape">
<a href="#" class="overlay pentagon"></a>
<div class="details">
<span class="heading">Заголовок</span>
<hr />
<p>Текст с описанием товара или краткое содержание и т.д. и т.п.</p>
<a href="/avtor/" class="button">Кнопка</a>
</div>
<div class="bg"></div>
<div class="base">
<img src="img/3.jpg" alt="" />
</div>
</div>
</body>
</html>
Вот и все. Вы может скачать исходник.
Спасибо за внимание! Пока.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Шумящий эффект для картинки при наведении
Эффект для ссылки – радужная ссылка
Выделение цветом ссылок при наведении на параграф
Фиксированное меню при прокрутке сайтаПохожие статьи
Бесплатный набор CSS-иконок для сайта/блога. Коллекция №1
Готовый код HTML-редактора
Как сделать бесконечное вращение картинки на CSS3
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330330 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274683 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222438 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187489 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186559
Добавить комментарий
Метки: css, для сайта, эффекты для сайта
Спасибо, Александр за комментарий. Планирую еще пару постов для WooCommerce…
⇒ Открыть статью ⇐