画像にマウスホバーでグラデーションのオーバーレイエフェクト
Result
たまに見かけるホバーエフェクト。グラデーションのオーバーレイがマウスホバーでスライドインする、みたいなの
css
.c-preview {
background: #000;
background: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 13%, rgba(0,0,0,1) 32%, rgba(116,132,190,1) 47%, rgba(208,133,109,1) 80%, rgba(69,252,212,1) 94%);
background-size: 400% 400%;
background-repeat: no-repeat;
display: flex;
width: 500px;
height: 500px;
max-width: 100vw;
max-height: 100vh;
justify-content: center;
align-items: center;
color: #fff;
position: relative;
cursor: pointer;
transition: .5s all;
}
.c-preview__img {
position: absolute;
left: 0;
top: 0;
background: #000 url(https://picsum.photos/600/400) no-repeat center center;
background-size: cover;
width: 100%;
height: 100%;
z-index: 1;
opacity: .5;
}
|
html
<a class="c-preview">
<div class="c-preview__img"></div>
<h2 class="c-preview__title">foo bar</h2>
</a>
|
via
CSS Gradient Hover Effect
