Hover Card 1

by Victor

HTML

<div class="frame">
  <div class="text"><div>How To Make Halloween Cupcakes</div></div>
  <div class="pop">
  <div class="pop__bar">
    <div class="pop__bar__item">33 likes</div>
     <div class="pop__bar__item">Dr. Morrow</div>
      <div class="pop__bar__item">Fri, Oct 13</div>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum magnam fuga quos. Sequi incidunt, quo rerum error qui itaque, laborum sed cumque similique recusandae tempora natus. Ut sequi minus cum!</p></div>
</div>

SCSS

* {
  box-sizing: border-box;  
}
/* .frame {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  height: 300px;
  padding: 1rem;
  background: #e5e5e5;
  justify-content: center;
  align-content: center;
  
  .text {
    flex: 0;
    border: 1px solid blue;
  }
  .pop {
    flex: 0;
    border: 1px solid blue;
    height: 0;
    max-height: 50%;
    transition: 0.5s ease all;
    overflow: hidden;
    background: white;
    }
    
    &:hover {
      .pop {
        flex: 1;
        height: 50%;
        max-height: 50%;
      }
    }
} */

.frame {
  
  display: flex;
  flex-direction: column;
  height: 300px;
  max-width: 50%;
  background: #e3e3e3;
  justify-content: center;
  align-content: center;
  background-image: url('https://picsum.photos/1920/1080');
  background-size: cover;
  position: relative;
  color: white;
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 1.45;
  font-size: 14px;
  overflow: hidden;
  
  &:before {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    content: '';
    position:absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  
  .text, .pop {
    position: relative;
    z-index: 2;
  }
  
  .text {
    
    flex: 1;
    transition: 0.5s ease all;
    text-align: center;
    display: flex;
    justify-content: center;
    justify-items: center;
    div {
      align-self: center;
      font-size: 28px;
    }
  }
  
  .pop {
    
    flex: 0;
    /* border: 1px solid blue; */
    height: 0;
    max-height: 0;
    transition: 0.5s ease all;
    
    background: #333;
    color: white;
    box-sizing: border-box;
    
    &__bar {
      position: relative;
      top: -2rem;
      left: 0;
      padding: 0.5rem 1rem;
          transition: 0.5s ease all;
          display: flex;
          &__item {
            display:inline-block;
            flex: 1;
            text-align: center;
            opacity: 0.8;
             transition: 0.5s ease all;
          }

    }
    }
    
  ...