| Kosten | Пятница, 24 Мая 2019, 05:01 | Сообщение 1 |
| Есть очень много ховер-эффектов изображений, что можно говорить очень много, здесь просто попался простой и в тоже время замечательный эффект для картинки, что работает при наведение клика. Сам трюк заключается в том, что название написано в верхнем левом углу, где также анимация присутствует.
Но и само увеличение картинки, что будет продолжатся, в то время когда курсор наведете на элемент. Как видим не чего такого оригинального, и все просто, вот в этом и фишка, что чем проще, тем по мне становится интереснее.
По умолчанию:
С наведением курсора, где сразу можно заметить, что картинка стало мутной, это тоже небольшое закрепление, что настраивается в прикрепленном CSS, как и остальное по дизайну.
Установка:
HTML
Код <div class="kucampaign_kedsanpusing"> <a href="http://zornet.ru/forum/51-6402-1"> <span class="velesamopag">ZORNET.RU</span> <img src="Ссылка на изображение" alt=""> </a> </div>
CSS
Код .kucampaign_kedsanpusing {
position: relative;
width: 463px;
height: 315px;
margin: 18px auto;
overflow: hidden;
}
.velesamopag {
position: absolute;
padding-left: 10px;
width: 120px;
height: 40px;
background: rgba(249, 249, 249, 0.83);
color: #232020;
letter-spacing: 1px;
line-height: 40px;
text-align: center;
text-shadow: 0 1px 1px #fbfbfb;
-webkit-transition: color .5s;
transition: color .5s;
z-index: 1;
}
.velesamopag:before {
position: absolute;
content: '';
left: 0;
height: 40px;
width: 0px;
background: rgb(255, 251, 251);
border-right: 10px solid #f91167;
-webkit-transition: width .5s;
transition: width .5s;
z-index: -1;
}
.kucampaign_kedsanpusing > a:hover .velesamopag, .kucampaign_kedsanpusing > a:hover .velesamopag:before {
width: 130px;
color: #626367;
}
.kucampaign_kedsanpusing > a:hover img {
opacity: .6;
-webkit-transform: scale(1.1,1.1) rotate(1deg);
transform: scale(1.1,1.1) rotate(1deg);
-webkit-transition: all 3s;
transition: all 3s;
}
.kucampaign_kedsanpusing img {
-webkit-transition: all .5s;
transition: all .5s;
}
Теперь есть тема выставить на сайт под разные картинки, что этот трюк безусловно будет не замечен, этим вы приукрасите ресурс и сделаете его более оригинальным и красиво оформленным.
Демонстрация
| | Страна: (RU) |
| |
