BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Эффекты для сайта » Hover-эффекты для картинок с помощью CSS-маски

Hover-эффекты для картинок с помощью CSS-маски

2014-10-28 / Вр:23:52 / просмотров: 6764

Hover-эффекты для картинок с помощью CSS-маски

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

[Посмотреть демонстрацию]

Как это реализовать?
Давайте все начнем постепенно.

1. Создайте для картинок папку «img» и залейте в нее картинки размерами 300 х 300 px:

Hover-эффекты для картинок с помощью CSS-маски

2. Для эффекта будем использовать маски. В качестве масок мы будем использовать прозрачный PNG вместо «CSS Shapes». Это нужно для того, чтобы избежать недоразумений со стороны браузеров. Прозрачная картинка должна быть размерами 310 х 310px. Залейте ее в ту же папку, где лежат картинки (в папку «img»):

Hover-эффекты для картинок с помощью CSS-маски

Фигура внутри может быть абсолютно любая, все зависит от вашей фантазии.

[скачать готовые маски]

В С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="https://bloggood.ru/" 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="https://bloggood.ru/" 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="https://bloggood.ru/" 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="https://bloggood.ru/" 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="https://bloggood.ru/" 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».

Наглядная схема конструкции:

Hover-эффекты для картинок с помощью CSS-маски

  • .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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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="https://bloggood.ru/" 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="https://bloggood.ru/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="https://bloggood.ru/avtor/" class="button">Кнопка</a>
    </div>
    <div class="bg"></div>
    <div class="base">
        <img src="img/3.jpg" alt="" />
    </div>
</div>

</body>
</html>

Вот и все. Вы может скачать исходник.

[скачать исходник]

Спасибо за внимание! Пока.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573