DVD & CD Style With CSS3 For Blogge...
DVD STYLE
HTML
<div id="movie-style"> <span class="corte-movie"> <img src="..JPG/PNG.." /> </span> <h1>Deskripsi</h1> <a href="#" class="mask-dvd"></a> <i class="dvd-rol"></i> </div>
CSS
#movie-style {
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
float: left;
margin: 0 90px 40px 0;
position: relative;
}
#movie-style a {
display: block;
height: 250px;
line-height: 0 !important;
z-index: 100;
}
#movie-style h1 {
background-color: rgba(0, 0, 0, 0.7);
bottom: 25px;
color: #FFF;
font-family: Arial;
font-size: 12px;
font-weight: bold;
margin: 0;
padding: 10px 0;
position: absolute;
text-align: center;
width: 180px;
z-index: 60;
text-shadow: 1px 1px 0 #000;
}
#movie-style:hover h1 {
color: #66bcff;
}
.mask-dvd {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjFkePTXNXRH9PSlqyrs-cUMo7s1x_lAKzoMsciEAKtA-EvxF1dWiG9a_AzH5YLzasoarGpbkLZdiOyzJVp9LRzup5Cb9df4iBG-0doCAtIvWZ_XFKmYeZe4XRt5Xj7sREU0DoS-t4R0pT/s1600/mask-dvd.png") no-repeat scroll 0 0 transparent;
box-shadow: 2px 0 1px rgba(0, 0, 0, 0.2) inset;
height: 250px;
left: 0;
position: absolute;
top: 5px;
width: 180px;
}
.corte-movie {
border-bottom: 5px solid #222;
border-radius: 3px 3px 3px 3px;
border-right: 5px solid #222;
border-top: 5px solid #222;
float: left;
height: 250px;
overflow: hidden;
position: relative;
width: 180px;
z-index: 50;
}
.corte-movie img {
max-height: 300px;
}
.dvd-rol {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd7ljWAZjMXANGtuwOJodOMS0xYlQ8RO6OR8BeoNNvpKHhhS6MTfPJ2NAdSckhj7Cglmfap26WTJVr_0wcrBfhX8n_2OJnmFlEMNOLfqqFGv33kopjocJtRe1xfk_6RBoRLclbRyVxLAVo/s1600/dvd.png") no-repeat scroll 0 0 transparent;
display: block;
height: 180px;
position: absolute;
right: 0;
top: 50px;
transform: rotate(100deg);
-moz-transform: rotate(100deg);
-webkit-transform: rotate(100deg);
-o-transform: rotate(100deg);
width: 180px;
z-index: 10;
}
.dvd-rol, #movie-style h1 {
transition: all 300ms ease-in-out 0s;
-moz-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
}
#movie-style:hover .dvd-rol {
right: -73px;
transform: rotate(242deg);
-moz-transform: rotate(242deg);
-webkit-transform: rotate(242deg);
-o-transform: rotate(242deg);
}
CD Style
(COMING SOON)
Keep Visiting for More Articles and Tutorials. :) Like our Official Page for More Updates... Our Downloading Portal Website. FileXOne!
Post a Comment