<div class="music-case">
  <div class="front-case">
    <div class="icon"></div>
  </div>
  <div class="disc">
    <div class="hole"></div>
  </div>
  <div class="back-case"></div>
</div>
<h2>Awesome Music Case</h2>
<small>   
  A backdrop-filter demonstration<br/>Works on Chrome & Safari <a href="http://caniuse.com/#feat=css-backdrop-filter" target="_blank">(caniuse)</a> Read more on <a href="https://codepen.io/ariona/details/ONKpqb/" target="_blank">description</a> <br />By <a href="http://ariona.net" target="_blank">Ariona, Rian</a>, Inspired by <a href="https://dribbble.com/shots/2729919-Music-Animation" target="_blank">BeardChicken</a></small>


<div class="iklan">
  <p>Need PSD to HTML & CSS service?</p>
  <a href="https://www.fiverr.com/share/vLevr" target="_blank">Start from <strong>$50</strong></a>
</div>
@import url(https://fonts.googleapis.com/css?family=Hind:700,300);
body{
	height           : 100vh;
	display          : flex;
	align-items      : center;
	justify-content  : center;
	background-color : #efefef;
	flex-direction   : column;
	font-family      : Hind;
}
.music-case{
	width         : 300px;
	height        : 300px;
	position      : relative;
	margin-bottom : 30px;
	cursor        : pointer;
}

/* Simple Icon */
.icon{
	width            : 30px;
	height           : 130px;
	background-color : red;
	transform        : skew(-20deg);
	background-image : linear-gradient(#E080D2, #f79374);
	
	&:before{
		content          :" ";
		width            : 80px;
		height           : 80px;
		border-radius    : 50%;
		position         : absolute;
		bottom           : -20px;
		right            : 2px;
		background-color : red;
		transform        : skew(20deg);
		background-color : #F79374;
	}

}

/* Front & Back Case */
.front-case,.back-case{
	width            : 300px;
	height           : 300px;
	border-radius    : 10px;
	background-color : rgba(white, .8);
	position         : relative;
	z-index          : 2;
	transition       : transform .3s ease;
	will-change      : transform;
}
/* Front Case */
.front-case{
	-webkit-backdrop-filter : blur(10px);
	backdrop-filter         : blur(10px);
	display                 : flex;
	align-items             : center;
	justify-content         : center;
}

/* Back Case */
.back-case{
	z-index    : 0;
	position   : absolute;
	left       : 0;
	top        : 0;
	box-shadow : 0 20px 30px -5px rgba(0,0,0,.3);
}

/* Disk: Black section; */
.disc{
	width            : 260px;
	height           : 260px;
	border-radius    : 50%;
	background-color : #333;
	position         : absolute;
	top              : 20px;
	left             : 20px;
	transition       : transform .5s ease-out;
	z-index          : 1;
	overflow         : hidden;
	box-shadow       : 0 5px 10px rgba(0,0,0,.3);
	background-image : repeating-radial-gradient(circle 10em at center,rgb(10, 17, 19) 0%,rgb(2, 41, 50) 2.2%,rgb(19, 31, 33) 3.6%,rgb(11, 29, 33) 4.8%,rgb(11, 29, 33) 4.8%,rgb(16, 43, 49) 6.7%);
	will-change      : transform;
	
	/* Dish Shine Effect */
	&:before,&:after{
		content       :" ";
		border-bottom : 140px solid rgba(255,255,255,.1);
		border-left   : 20px solid transparent;
		border-right  : 20px solid transparent;
		height        : 0;
		width         : 10px;
		position      : absolute;
	}
	&:before{
		left   : 0;
		right  : 0;
		margin : auto;
		top    : 50%;
	}
	&:after{
		left      : 0;
		right     : 0;
		margin    : auto;
		transform : rotate(180deg);
	}
}

/* Disk: Hole Section; */
.hole{
	width            : 100px;
	height           : 100px;
	background-color : #e74c3c;
	border-radius    : 50%;
	left             : 0;
	top              : 0;
	right            : 0;
	bottom           : 0;
	margin           : auto;
	position         : absolute;
	z-index          : 1;
	
	&:before{
		content          :" ";
		width            : 40px;
		height           : 40px;
		border-radius    : 50%;
		background-color : #efefef ;
		left             : 0;
		right            : 0;
		top              : 0;
		bottom           : 0;
		position         : absolute;
		margin           : auto;
		box-shadow       : inset 5px 5px 10px rgba(0,0,0,.2);
	}
}

.music-case:hover{
	.front-case, .back-case{
		transform: translateX(-100px);
	}
	.disc{
		transform: translateX(100px) rotate(380deg);
	}
}


h2{
	margin : 0;
	color  : #2c3e50;
}
small{
	font-size  : 13px;
	color      : #7f8c8d;
	display    : block;
	text-align : center;
}
a{
	color: #e74c3c;
}


.iklan{
  position: fixed;
  bottom: 0;
  right: 0;
  background: white;
  width: 200px;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  
  p{
    margin: 0 0 15px;
    line-height: 1.4;
    color: #333;
  }
  
  a{
    background-color: #ff4757;
    color: white;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 3px;
    text-decoration: none;
    font-size: 14px;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.