Article card Base

by James Connolly

HTML

<div class="attorney-card--single">
  <div class="attorney-card--single__img">
   <img src="https://picsum.photos/200" alt="">
  </div>
  <div class="attorney-card--single__info">
    <h2>
    sample title 123
    </h2>
  </div>
  <a href="#0">Read More</a>
</div>

SCSS

// do not copy
.attorney-card--single {
  width: 50%;
  margin: 0 auto;
}

// default styles
.attorney-card--single {
  position: relative;
  
  * {
    transition: all 0.3s ease;
  }
  
  &__img {
    background: red;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 125%;
    overflow: hidden;
    
    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0;
    }
  }
  
  &__info {
    width: 100%;
    padding: 20px;
    color: #fff;
    box-sizing:border-box;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    
    h2 {
      margin: 0;
      padding: 0;
      line-height: 1.2;
    }
  }
  
  a {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
  }
  
  &:hover {
    &__img {
      transform: scale(1.1);
    }
    
    &__info {
      color: #000;
      background: #fff;
    }
  }
}