Домой / Рецепты CSS / Красивый hover-эффект для изображения (фото)
Красивый hover-эффект для изображения (фото)

Красивый hover-эффект для изображения (фото)

Предлагаю вашему вниманию пример реализации красочного hover-эффекта при наведении мышкой на изображение.

Эффект реализован с использованием только каскадной таблицы стилей CSS.

Демо

HTML

<div class="container">
 <div class="dia"></div>
 <div class="dia giro"></div>
 <img src="http://placekitten.com/400" />
</div>

CSS

body {
 background: #222;
 zoom: 1.5;
}
.container {
 background: #fff;
 margin: 100px auto;
 width: 200px;
 height: 200px;
 overflow: hidden;
 border-radius: 50%;
 position: relative;
}
img {
 z-index: -1;
 height: 200px;
 width: 200px;
 border-radius: 50%;
}
.dia {
 position: absolute;
 width: 200px;
 height: 200px;
 border-radius: 50%;
 box-shadow: inset 0px 100px 0px rgba(255, 0, 0, 0.5), inset 0px -100px 0px rgba(255, 255, 0, 0.5), inset 100px 0px 0px rgba(255, 0, 40, 0.5), inset -100px 0px 0px rgba(255, 69, 0, 0.5);
 transition: box-shadow 0.5s;
}
.giro {
 transform: rotate(45deg);
 opacity: 0.5;
 transition: box-shadow 1s;
}
.container:hover .dia {
 box-shadow: inset 0px 15px 0px #ff0000, inset 0px -15px 0px #ffff00, inset 15px 0px 0px #ff0028, inset -15px 0px 0px #ff4500;
}

Предлагаю вашему вниманию пример реализации красочного hover-эффекта при наведении мышкой на изображение. Эффект реализован с использованием только каскадной таблицы стилей CSS. HTML CSS body { background: #222; zoom: 1.5; } .container { background: #fff; margin: 100px auto; width: 200px; height: 200px; overflow: hidden; border-radius: 50%; position: relative; } img { z-index: -1; height: 200px; width: 200px; border-radius: 50%; } .dia { position: absolute; width: 200px; height: 200px; border-radius: 50%; box-shadow: inset 0px 100px 0px rgba(255, 0, 0, 0.5), inset 0px -100px 0px rgba(255, 255, 0, 0.5), inset&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.85 ( 2 голосов )
95

Оставить комментарий

Ваш email не будет опубликован.

*