<div class = 'container'>
  <div class = 'product_container'>
    <div id = 'product_one' class='product'>
    <h2 class = 'title'>More Matte Collection</h2>
      <span class = 'color'>Red</span>
      <img src= 'https://www.beatsbydre.com/content/dam/beats/web/product/headphones/solo-pro/global/ecom/product-tiles/sp-global-producttilev2-red.png.large.2x.png' alt= 'red headphones' class = 'image'/>
      
  <span class= 'price'> $379.95</span>
    </div>
    
     <div id = 'product_two' class='product'>
     <h2 class = 'title'>More Matte Collection</h2>
      <span class = 'color'>Dark Blue</span>
      <img src = 'https://www.beatsbydre.com/content/dam/beats/web/product/headphones/solo-pro/global/ecom/product-tiles/sp-global-producttilev2-darkblue.png.large.2x.png' alt = 'blue headpones' class = 'image'/>
   <span class= 'price'> $379.95</span>
    </div>
    
  <div id = 'product_three' class='product'>
     <h2 class = 'title'>More Matte Collection</h2>
      <span class = 'color'>Ivory</span>
      <img src = 'https://www.beatsbydre.com/content/dam/beats/web/product/headphones/solo-pro/global/ecom/product-tiles/sp-global-producttilev2-ivory.png.large.2x.png' alt = 'white headpones' class = 'image'>
   <span class= 'price'> $379.95</span>
    </div>
    
    <div id = 'product_four' class='product'>
    <h2 class = 'title'>More Matte Collection</h2>
      <span class = 'color'>Black</span>
      <img src = 'https://www.beatsbydre.com/content/dam/beats/web/product/headphones/solo-pro/global/ecom/product-tiles/sp-global-producttilev2-black.png.large.2x.png' alt = 'black headpones' class = 'image'>
   <span class= 'price'> $379.95</span>
    </div>  
  <div class = 'nav_btns'>
    <a href = '#product_one' class='link first_link'></a>
    <a href = '#product_two' class='link second_link'></a>
    <a href = '#product_three' class='link third_link'></a>
   <a href = '#product_four' class='link fourth_link'></a>
  </div>
</div>
$red: #AA392E;
$blue: #1B1C38;
$grey: #9F9B98;
$black: #111111;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Montserrat, sans-serif;
}

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

.product_container {
  width: 380px;
  height: 500px;
  position: relative;
}

.product {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;
  box-shadow: -3px 0px 10px -2px rgba(0,0,0,0.14);
  opacity: 0;
  transition: all 1s ease .5s;

    .title {
    font-size: 19px;
    padding-bottom: 10px;
    font-weight: bolder;
    } 

    .price {
      font-size: 20px;
    }

    .image {
      width: 40%;
      padding: 30px 0;
      transform: scale(2.5);
    }
}

.product > * {
  transform: translateY(-50px);
  opacity: 0;
  transition: all .8s ease;
}

.product:target {
  opacity: 1;
  z-index: 7;
  
  & .title {
    transition-delay: 1.2s;
  }
  
  & .price {
    transition-delay: .6s;
  }
  
  & .image {
    transform: scale(1);
    transition-delay: .8s;
  }
  
  & .color {
    transition-delay: 1s;
  }
}

.product:target > * {
  transform: translateY(0px);
  opacity: 1;
  transition: all .8s ease;
}

#product_one, .first_link {
  background: radial-gradient(lighten($red, .8), $red);
}

#product_two, .second_link {
 background: radial-gradient(lighten($blue, .8), $blue);
}

#product_three, .third_link {
   background: radial-gradient(lighten($grey, .8), $grey);
}

#product_four, .fourth_link {
   background: radial-gradient(lighten($black, .8), $black);
}

.nav_btns {
  display: flex;
  z-index: 70;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);

    .link {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      margin: 5px;
      border: 1px solid white;
  }
}
View Compiled
  if (document.location.hash == "" || document.location.hash == "#")
    document.location.hash = "#product_one";

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.