• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Эффект наведения изображения через HTML (Оригинальный пример для ховер-эффектов изображений)
Эффект наведения изображения через HTML
Kosten
Пятница, 24 Мая 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Есть очень много ховер-эффектов изображений, что можно говорить очень много, здесь просто попался простой и в тоже время замечательный эффект для картинки, что работает при наведение клика. Сам трюк заключается в том, что название написано в верхнем левом углу, где также анимация присутствует.

Но и само увеличение картинки, что будет продолжатся, в то время когда курсор наведете на элемент. Как видим не чего такого оригинального, и все просто, вот в этом и фишка, что чем проще, тем по мне становится интереснее.

По умолчанию:



С наведением курсора, где сразу можно заметить, что картинка стало мутной, это тоже небольшое закрепление, что настраивается в прикрепленном 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;
}

Теперь есть тема выставить на сайт под разные картинки, что этот трюк безусловно будет не замечен, этим вы приукрасите ресурс и сделаете его более оригинальным и красиво оформленным.

Демонстрация
Прикрепления: 0196373.png (226.2 Kb) · 4915710.jpg (27.2 Kb) · hover-effect.zip (1.8 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Эффект наведения изображения через HTML (Оригинальный пример для ховер-эффектов изображений)
  • Страница 1 из 1
  • 1
Поиск: