<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";
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.