Сложно представить современный сайт без эффектов на изображение, плюс где еще будут разные шрифтовые картинки, что больше подходят под тематику сайта. Так что вашему вниманию небольшая подборка на эффекты, что безусловно украсят ваш сайт.
Эти новейшие технологии предлагают множество уникальных, удивительных и интересных эффектов при наведении курсора для различных веб-элементов. Некоторые из них изменяют непрозрачность изображения, в то время как другие применяют различные необычные эффекты к тексту и изображениям.
В этом материале собраны несколько классных CSS3 эффектов наведения мыши. Поскольку все эти эффекты при наведении доступны в коде, вы можете легко добавить их на свой веб-сайт или в другие веб-проекты.
HTML
Код
<figure class="snip1350 yellow">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample59.jpg" alt="sample59" /><i class="ion-chatboxes"></i>
<a href="#"></a>
</figure>
<figure class="snip1350 blue hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample60.jpg" alt="sample60" /><i class="ion-checkmark"></i>
<a href="#"></a>
</figure>
<figure class="snip1350 red"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample73.jpg" alt="sample73" /><i class="ion-search"></i>
<a href="#"></a>
</figure>
CSS
Код
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip1350 {
position: relative;
overflow: hidden;
margin: 10px;
min-width: 230px;
max-width: 315px;
max-height: 220px;
width: 100%;
background: #000000;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1350 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
figure.snip1350 img {
max-width: 100%;
vertical-align: top;
}
figure.snip1350 i {
position: absolute;
top: 0%;
left: 50%;
border-radius: 50%;
font-size: 34px;
color: #000000;
width: 60px;
height: 60px;
line-height: 60px;
background: #ffffff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
transition: all 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
z-index: 1;
opacity: 0;
}
figure.snip1350 a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
}
figure.snip1350:after {
background: #000000;
width: 100%;
height: 50%;
position: absolute;
left: 0;
bottom: 0;
content: '';
opacity: 0.7;
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
figure.snip1350.blue:after {
background-color: #2472a4;
}
figure.snip1350.blue i {
color: #20638f;
}
figure.snip1350.red:after {
background-color: #ab3326;
}
figure.snip1350.red i {
color: #962d22;
}
figure.snip1350.yellow:after {
background-color: #e08e0b;
}
figure.snip1350.yellow i {
color: #c87f0a;
}
figure.snip1350.green:after {
background-color: #229955;
}
figure.snip1350.green i {
color: #1e8449;
}
figure.snip1350.orange:after {
background-color: #d67118;
}
figure.snip1350.orange i {
color: #bf6516;
}
figure.snip1350.navy:after {
background-color: #2b3c4e;
}
figure.snip1350.navy i {
color: #222f3d;
}
figure.snip1350:hover i,
figure.snip1350.hover i {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
opacity: 1;
transition: all 400ms 0ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
figure.snip1350:hover:after,
figure.snip1350.hover:after {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
JS
Код
$(".hover").mouseleave(
function () {
$(this).removeClass("hover");
}
);
Этот js идет на один материал на всех вариаций, что находится по центру.
Демонстрация
