» » Виджет с ховер-эффектом

Виджет с ховер-эффектом

Ранее в статье я описала интересный гаджет из 3 круглых картинок с ховер эффектом. В интернете я нашла похожий, но, как мне показалось, более интересный. Гаджет с круглыми картинками, при наведении курсора, картинка меняется на текст. Виджетом можно просто украсить блог, либо использовать изображения для ссылок на ваши страницы или сообщения, как вариант, на страницу контакты. Код гаджета состоит из CSS и HTML. 

Гаджет с картинками

Гаджет с картинками
<style>
.Btrix-item {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: relative;
    cursor: default;}
.Btrix-info-wrap,
.Btrix-info{
    position: absolute;border: 1px solid #8D8D8D;margin-top: -1px;width: 150px;
    height: 150px;
    border-radius: 50%;}
.Btrix-info-wrap {
    background: #cc80ff url(../images/bg.jpg);
    box-shadow:
        0 0 0 20px rgba(255,255,255,0.2),
        inset 0 0 3px rgba(115,114, 23, 0.8);
}
.Btrix-info > div {
    display: block;position: absolute;width: 150px;height: 150px;
    border-radius: 50%;
    background-position: center center; 
    -webkit-backface-visibility: hidden;
}
.Btrix-info .Btrix-info-front {
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.Btrix-info .Btrix-info-back {
    opacity: 0;background: #eba8ff;pointer-events: none;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: all 0.4s ease-in-out 0.2s;
    -moz-transition: all 0.4s ease-in-out 0.2s;
    -o-transition: all 0.4s ease-in-out 0.2s;
    -ms-transition: all 0.4s ease-in-out 0.2s;
    transition: all 0.4s ease-in-out 0.2s;
}
.Btrix-img-1 {
    background-image: url(адрес вашей картинки);}
.Btrix-img-2 {
    background-image: url(адрес вашей картинки);}
.Btrix-img-3 {
    background-image: url(адрес вашей картинки);}
.Btrix-info h3 {
    color: #fff;
    text-transform: uppercase;letter-spacing: 2px;font-size: 16px;margin: -20px 15px;
    padding: 40px 0 0 0;
    height: 80px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(92, 16, 162, 0.8);
}
.Btrix-info p {
    color: #fff;
    padding: 10px 5px 0;
    font-style: italic;
    margin: -60px 30px;
    font-size: 12px;
    border-top: 1px solid rgba(92, 16, 232, 1);
}
.Btrix-info p a {
    display: block;color: #e7615e;font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}
.Btrix-info p a:hover {
    color: #fff;
}
.Btrix-item:hover .Btrix-info-front {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
}
.Btrix-item:hover .Btrix-info-back {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;}
.Btrix-grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;}
.Btrix-grid:after,
.Btrix-item:before {
    content: '';
    display: table;}
.Btrix-grid:after {
    clear: both;}
.Btrix-grid li {
    width: 150px;
    height: 150px;
    display: inline-block;
    margin: 4px;
}
</style>
<section class="main">
            
<ul class="Btrix-grid">
<li>
<div class="Btrix-item Btrix-img-1">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-1"></div>
<div class="Btrix-info-back">
<h3>
Роза</h3>
Текст <a href="ссылка"><br/>Текст</a><br />
</div></div></div></div></li>

<li>
<div class="Btrix-item Btrix-img-2">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-2"></div>
<div class="Btrix-info-back">
<h3>
Гранат</h3>
Текст <a href="ссылка"><br/>Текст</a><br />
</div></div></div></div></li>

<li>
<div class="Btrix-item Btrix-img-3">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-3"></div>
<div class="Btrix-info-back">
<h3>
Тюльпаны</h3>
Текст <a href="ссылка"><br/>Текст</a><br />
</div></div></div></div></li></ul></section>
Выделенное красным в коде — адреса ваших картинок. 
Синим — ваш текст.
Оранжевым — ссылка на статью или ресурс, по вашему желанию.
Цвет в коде так же меняем на свой вкус.
Салатовым — первый цвет, который появляется при наведении курсора на картинку.
Голубым — цвет границы картинок.
Розовым — второй цвет, который появляется при наведении курсора на картинку.
Так же можно поменять цвет текста заголовка — выделила зелёным.

Устанавливаем гаджет в Дизайн/Добавить гаджет/HTML/Java Script. Посмотреть меню можно, скопировав код и вставив его в окошко визуального редактора.

Ваши комментарии:

Комментарии со спамом удаляются.