<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);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.