<div class="list-item">
  <div class="list-item__image-container">
    <img src="data:image/jpeg;base64,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" />
  </div>
  <div class="list-item__text-container">
    <h1>Ray Charles</h1>
    <p>Ray Charles Robinson was an American singer, songwriter, musician, and composer. Among friends and fellow musicians he preferred being called "Brother Ray". He was often referred to as "The Genius."</p>
    <a href="https://en.wikipedia.org/wiki/Ray_Charles" target="_blank">Full article</a>
  </div>
</div>
* {
  font-family: Helvetica, sans-serif;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.list-item {
  position: relative;
  width: 500px;
  background: #1e1e1e;
  border-radius: 5px;
  color: white;
  box-shadow: 0 0 10px 5px rgba(black, 0.05);
  transition: 1s ease-out;
  &:hover {
    transform: scale(1.01);
  }
  &__image-container {
    width: 100%;
    height: 300px;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
  &__text-container {
    padding: 40px;
    h1 + p {
      margin-top: 10px;
    }
    p + a {
      display: inline-block;
      margin-top: 10px;
    }
    p {
      line-height: 1.5;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    a {
      color: inherit;
      &:hover {
        &::before {
          box-shadow: 0 0 20px 20px rgba(black, 0.1);
        }
      }
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transition: 1s;
      }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.