Рассмотрим один прекрасный эффект вспыхивающего изображения или картинки, который работает на чистом CSS. Где смотрится оригинально, в тот момент когда га снимок наводишь клик, что происходит мигание. Где можно предположить что созданный эффект сделан для красоты, но в основном используется для привлекательной страниц.
Веб разработчику такой оригинальный трюк не так сложно реализовать на сайте. Это очень простой и доступный эффект, что будет привлекать своей оригинальностью, не смотря на светлом или на темном формате сайта.
Установка:
HTML
Код
<h2 id="klas">Красивый эффект</h2>
<div class="kodenzia makinlogedon-pavkacuved">
<div>
<figure><img src="http://zornet.ru/_fr/79/0293453.jpg" /></figure>
<span>Здесь название 1</span>
</div>
<div>
<figure><img src="http://zornet.ru/_fr/79/9937638.jpg" /></figure>
<span>Здесь название 2</span>
</div>
<div>
<figure><img src="http://zornet.ru/_fr/79/7763355.jpg" /></figure>
<span>Здесь название 3</span>
</div>
</div>
CSS
Код
.makinlogedon-pavkacuved {
margin: 15px 15px 0;
padding: 0;
}
.makinlogedon-pavkacuved:last-child {
padding-bottom: 60px;
}
.makinlogedon-pavkacuved::after {
content: '';
clear: both;
display: block;
}
.makinlogedon-pavkacuved div {
position: relative;
float: left;
width: 300px;
height: 200px;
margin: 0 0 0 25px;
padding: 0;
cursor:pointer;
}
.makinlogedon-pavkacuved div:first-child {
margin-left: 0;
}
.makinlogedon-pavkacuved div span {
position: absolute;
bottom: -20px;
left: 0;
z-index: -1;
display: block;
width: 300px;
margin: 0;
padding: 0;
color: #444;
font-size: 18px;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
opacity: 0;
}
figure {
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}
/* Flashing */
.kodenzia figure:hover img {
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
@-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
Один из самых простых эффектов при наведение курсора, что стильно смотрится.
Демонстрация
