Предлагаю вашему вниманию пример реализации красочного 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; }
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!