<div class="block">
Foo
</div>
.block {
width: 250px;
height: 100px;
border-radius: 12px;
position: relative;
transition: transform .3s ease-in-out;
}
.block::before {
content: "";
position: absolute;
inset: -1px;
z-index: -1;
border-radius: inherit;
background-image: linear-gradient(to bottom right, #333, #ccc);
}
.block::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: #fff;
}
.block:hover {
transform: scale(1.1);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.