Vinyl Cover Animation (Pure CSS)

By Javier Palmieri

Sunday 29th, Nov, 2015 | # # # #

Demo Download

---

---

Hi Guys, we take a PUNK :) album vinyl cover, a little HTML, and some CSS3 transitions and transforms Hover to create a  vinyl animation effect for showing off the music you love.

index.html

The Markup will consist of a div with class album that contains two divs, one for cover image and other for vinyl image

    <div id="wrapper">
        <div class="album">
            <span class="vinyl"></span>
            <span class="cover cover1"></span>
        </div>
        
        <div class="album">
            <span class="vinyl"></span>
            <span class="cover cover2"></span>
        </div>
        
        <div class="album">
            <span class="vinyl"></span>
            <span class="cover cover3"></span>
        </div>
        
         <div class="album">
            <span class="vinyl"></span>
            <span class="cover cover4"></span>
        </div>
    </div>

main.css

The secret is in the class .vinyl which contains transition property and hover with transform property

.vinyl {
	position:absolute;
	height:300px;
	width:300px;
	z-index: -11;
	display: block;
	-webkit-transition: all .25s ease-out;
	transition: all .25s ease-out;
	background-image:url(vinyl.png);
	
}
.cover{
	position:absolute;
	height:300px;
	width:300px;
	z-index: 33;
}

.cl_container a span{
	width:17px;
	height:44px;
	position:absolute;
	background:transparent url(../images/pin.png) no-repeat top left;
	top:-20px;
	left:55px;
}


.cover1{
	background-image:url(cover1.jpg);	
}
.cover2{
	background-image:url(cover2.jpg);	
}
.cover3{
	background-image:url(cover3.jpg);	
}
.cover4{
	background-image:url(cover4.jpg);	
}
.album {
	height:300px;
	width:300px;
	float:left;
	margin-right:200px;
	margin-top:50px;
}
div.album:hover .vinyl {
	-webkit-transform:  translateX(150px) rotate(195deg);
	-moz-transform:  translateX(150px) rotate(195deg);
	-ms-transform:  translateX(150px) rotate(195deg);
	-o-transform:  translateX(150px) rotate(195deg);
	transform:  translateX(150px) rotate(195deg);
}
#wrapper{
	margin: 0 auto;
	max-width:1000px;
	padding:50px;
}

if you have suggestions or ideas about the this demo please comment

Warning: include(view/Hi Guys, we take a PUNK :) album vinyl cover, a little HTML, and some CSS3 transitions and transforms Hover to create a  vinyl animation effect for showing off the music you love. index.html  ): failed to open stream: No such file or directory in /home/wdrfree/public_html/view/blog_detalle.php on line 316

Warning: include(): Failed opening 'view/Hi Guys, we take a PUNK :) album vinyl cover, a little HTML, and some CSS3 transitions and transforms Hover to create a  vinyl animation effect for showing off the music you love. index.html  ' for inclusion (include_path='.:/opt/cpanel/ea-php72/root/usr/share/pear') in /home/wdrfree/public_html/view/blog_detalle.php on line 316