<div class="container">
  <div class="profile">
    <div class="image"></div>
    <h2>Sarah Jane</h2>
    <p>20-year-old part time photograpger who enjoys binge-watching boxed sets, watching sport and hockey. She is intelligent and careful, but can also be a bit grumpy.</p>
  </div>
</div>
$body: #09000b;
$nunito: "Nunito", sans-serif;
$dark: #0a0a0a;

body {
  background-color: $body;
  font-family: $nunito;
}

.container {
  padding: 100px 0;
}

.profile {
  max-width: 300px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 30px;
  border-radius: 10px;
  position: relative;
  
  h2 {
    color: $dark;
  }
  
  p {
    color: rgba($dark, 0.8)
  }
  
  .image {
    width: 75px;
    height: 75px;
    background: red;
    border-radius: 50%;
    margin: 0 auto;
    position: absolute;
    right: 15px;
    top: 15px;
    transform-origin: bottom left;
    box-shadow: 0 3px 15px rgba($dark, 0.1);
    transition: all 0.3s ease-in-out;

    background-image: url("https://images.unsplash.com/photo-1479936343636-73cdc5aae0c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  
  &:hover {
    .image {
      transform: scale(1.5);
      border-radius: 10px;
    }
  }
}

View Compiled

External CSS

  1. https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.