body, html{
	margin: 0px;
	width: 100%;
	height: 100%;
}
.album_outer{
	margin: 100px auto;
	/* width is needed */
	width: 60%;
	/* width is needed */
}
.album_inner{
	/* padding-top/ translateX is needed */
	padding-top: 40px;
	transform: translateX(60px);
	/* padding-top/ translateX is needed */
	width: 100%;
	height: 100%;
	text-align: left;
}
.album_unit{
	/* margin-left/ width/ height are needed */
	margin-left: -60px;
	width: 300px;
	height: 130px;
	/* margin-left/ width/ height are needed */
	display: inline-block;
	cursor: pointer;
}
.album_unit_inner{
	position: absolute;
	/* padding/ width/ height are needed */
	padding: 10px;
	width: 200px;
	height: 150px;
	/* padding/ width/ height are needed */
	border: 1px solid gray;
	border-radius: 3% 3% 3% 3%/4% 4% 4% 4%;
	background: white;
	display: inline-block;
	box-sizing: border-box;
	transform: skewY(-25deg) skewX(20deg);
	opacity: 1;
	transition: transform .5s, opacity 0.5s;
}
.album_unit img{
	width: 100%;
	height: 100%;
}

.album_unit_inner:hover {
	transform: skewY(0deg) skewX(0deg);
	z-index: 1;
}

/* set hover effect */
/*
/* */
/* .album_unit:hover .album_unit_inner{
	-webkit-transform: skewX(0deg) skewY(0deg) translate(10px, -3px) scale(1.5);
	opacity: 1;
	z-index: 1;
} */
/* */
/*
/* set hover effect end*/

/* set the effect for mouseenter/ mouseleave/ click event */
.pop_up{
	-webkit-transform: skewX(0deg) skewY(0deg) translate(10px, -3px) scale(1.5);
	transform: skewX(0deg) skewY(0deg) translate(10px, -3px) scale(1.5);
	opacity: 1;
    
}
/* set the effect end*/

@media all and (max-width: 768px){
	.album_outer{
		width: 65%;
	}
	.album_inner{
		transform: translateX(0px);
		margin-left: 50px;
	}
}