xing-like box animation (desktop only)

by Ercan Cicek

HTML

<div class="card">
  <div class="card-bar"></div>
  <h1>Hover here</h1>
</div>

SCSS

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 350px;
  height: 200px;
  transition: box-shadow 0.15s linear;
  > .card-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    margin: 24px 0;
    background-color: #c6f16d;
    transition: margin 0.15s linear;
  }
  > h1 {
    font-family: Helvetica, Arial, sans-serif;
    color: #aaa;
  }
  &:hover {
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    > .card-bar {
      margin: 0;
    }
  }
}