Preview

Exhibition

Halloween With Love

20 Out to 23 Nov 2020

On mobile device the panel is automatically visible.

HTML

SCSS

*, ::after, ::before {
  box-sizing: border-box;
}

/* css element */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');

.card-panel {
  width: 100%;
  max-width: 270px;
  border-radius: 15px;
  position: relative;
  overflow: hidden;

  img {
    width: 100%;
  }

  .info {
    position: absolute;
    width: 100%;
    background-color: #ffffff;
    padding: 20px;
    bottom: -120px;
    left: 0;
    font-family: 'Roboto', sans-serif;
    transition: all .3s ease-in-out;
    
    .catg {
      font-size: 12px;
      color: #8492A6;
      font-weight: 400;
      display: block;
      margin-bottom: 3px;
    }
    
    h3 {
      font-size: 20px;
      color: #162B39;
      font-weight: 700;
      margin: 0 0 10px 0;
    }
    
    p {
      font-size: 14px;
      line-height: 14px;
      color: #8492A6;
      font-weight: 400;
      margin: 0;
    }
  }

  &:hover {
    .info {
      bottom: 0;
    }
  }
}

@media (max-width:576px) {
  .card-panel .info {
    bottom: 0;
  }
}