Blogger Buzz: Image Effects

Add a Custom jQuery Lightbox To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
If you are not satisfied with the default lightbox set up by Blogger, here's another amazing way to show off your images. I have already shown you in one of my previous tutorials <a href="http://buzzblogger1.blogspot.com/2013/03/how-to-customize-bloggers-lightbox.html" rel="nofollow" style="color: blue;" target="_blank">how to customize the Blogger lightbox</a> by changing the background color, borders or text color, but this tutorial will show you how to replace it entirely with a really cool jQuery Lightbox plugin that is very popular among bloggers. 
 
What this lightbox does is to display larger versions of the images that will pop up into a larger box when we click on them and lets us to easily navigate through a set of images using the previous and next buttons. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRHh-ZNZmqrwq-XuddZ7puNoPKnk3yOuKEjAIWmU3t1euF7j6L-u6nSSzLKWGpzcRnLvsXIgSpXL-PIyvI5J1v0knbUU0u-MlEJl1qbiJBB8DRP4j90p5I8LBvmnFT6T7OIR0xAtvT-mXX/s1600/custom-blogger-jquery-lightbox-for-displaying-images.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jquery lightbox, blogger plugins" border="0" height="267" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRHh-ZNZmqrwq-XuddZ7puNoPKnk3yOuKEjAIWmU3t1euF7j6L-u6nSSzLKWGpzcRnLvsXIgSpXL-PIyvI5J1v0knbUU0u-MlEJl1qbiJBB8DRP4j90p5I8LBvmnFT6T7OIR0xAtvT-mXX/s1600/custom-blogger-jquery-lightbox-for-displaying-images.png" title="add a custom jquery lightbox to blogger" width="320" /></a></div>
 
To see a demo of it, please visit this page and click on any image to enlarge. 
 
 
<h3>
Adding jQuery Lightbox to Blogger</h3>
Step 1. From your <a blogger.com="" href="https://www.blogger.com/null" http:="" rel="nofollow" style="color: blue;" target="_blank">Blogger Dashboard</a>, click on Template > Edit HTML  
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Edit HTML" border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" title="how to add a custom jquery lightbox to blogger " width="320" /></a></div>
 
Step 2. Click anywhere on the code area and press the CTRL + F keys to open the search box. 
Paste the following tag inside the search box and hit Enter to find it: 
<blockquote class="tr_bq">
]]></b:skin></blockquote>
Step 3. Choose a style from below and just above the ]]></b:skin> tag, paste the CSS code: 
 
Lightbox with white background: 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisddKeZTsqChcwBFnHaxDzVN5MSgA9uFWeNXOCaR4XC2HWBuj4mVmwRP9Ju5BbCBQ-YR94WiFyjBR4kq1DxpPtiqjRdqj57HaiQc6hAcQNS2fzafeXqjUsutfXiVLH-180E5jF04uRtxZZ/s1600/jquery-lightbox-with-white-background.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jquery lightbox white" border="0" height="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisddKeZTsqChcwBFnHaxDzVN5MSgA9uFWeNXOCaR4XC2HWBuj4mVmwRP9Ju5BbCBQ-YR94WiFyjBR4kq1DxpPtiqjRdqj57HaiQc6hAcQNS2fzafeXqjUsutfXiVLH-180E5jF04uRtxZZ/s1600/jquery-lightbox-with-white-background.png" title="add a custom jquery lightbox to blogger" width="320" /></a></div>
<blockquote class="tr_bq">
#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;} 
#jquery-lightbox{position:absolute;top:10%;left:0;width:100%;z-index:100;text-align:center;line-height:0;} 
#jquery-lightbox a,#jquery-lightbox a:hover{border:none;} 
#jquery-lightbox a img{border:none;} 
#lightbox-container-image-box{position:relative;background-color:#fff;max-width: 960px;max-height: 560px;margin:0 auto;} 
#lightbox-container-image{padding:10px;} 
img#lightbox-image {max-height: 540px;max-width: 940px;} 
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0;} 
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width: 100%;z-index:10;} 
#lightbox-container-image-box > #lightbox-nav{left:0;} 
#lightbox-nav a{outline:none;} 
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block;} 
#lightbox-nav-btnPrev{left:10%;float:left;} 
#lightbox-nav-btnNext{right:10%;float:right;} 
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0;} 
#lightbox-container-image-data{padding:0 10px;color:#555;} 
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left;} 
#lightbox-image-details-caption{font-weight:bold;} 
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em;} 
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em;}</blockquote>
Lightbox with dark background: 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSPKmYelj_d-Y04BXc1UG9nZQ_rRORj2m9XitnNK1dlu0soKCX06m7rU23c1xbzTEA9_QaNJWGS6yOgB_F-YfbuW2u7nhdv-oi9rpdfWfE3gH6ju-EOpKOPgXUiSsy-W8yFKovDK0iOhw0/s1600/jquery-lightbox-with-dark-background.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jquery lightbox dark" border="0" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSPKmYelj_d-Y04BXc1UG9nZQ_rRORj2m9XitnNK1dlu0soKCX06m7rU23c1xbzTEA9_QaNJWGS6yOgB_F-YfbuW2u7nhdv-oi9rpdfWfE3gH6ju-EOpKOPgXUiSsy-W8yFKovDK0iOhw0/s1600/jquery-lightbox-with-dark-background.png" title="add a custom jquery lightbox to blogger" width="320" /></a></div>
<blockquote class="tr_bq">
#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;} 
#jquery-lightbox{position:absolute;top:10%;left:0;width:100%;z-index:100;text-align:center;line-height:0} 
#jquery-lightbox a,#jquery-lightbox a:hover{border:none} 
#jquery-lightbox a img{border:none;} 
#lightbox-container-image-box{position:relative;background-color:#000;max-width: 960px;max-height: 560px;margin:0 auto} 
#lightbox-container-image{padding:10px;} 
img#lightbox-image {max-height: 540px;max-width: 940px;} 
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0} 
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width: 100%;z-index:10} 
#lightbox-container-image-box > #lightbox-nav{left:0;} 
#lightbox-nav a{outline:none} 
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block} 
#lightbox-nav-btnPrev{left:10%;float:left} 
#lightbox-nav-btnNext{right:10%;float:right} 
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#000;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0} 
#lightbox-container-image-data{padding:0 10px;color:#fff} 
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left} 
#lightbox-image-details-caption{font-weight:bold} 
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em} 
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em}</blockquote>
Step 4. Now find the </head> tag and just above it, add the following scripts: 
 
Lightbox with white background: 
<blockquote class="tr_bq">
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/> 
    <script src='http://helplogger.googlecode.com/svn/trunk/custom-lightbox-for-blogger.js' type='text/javascript'/></blockquote>
Lightbox with dark background: 
<blockquote class="tr_bq">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/> 
    <script src='http://helplogger.googlecode.com/svn/trunk/custom-lightbox-for-blogger-black.js' type='text/javascript'/></blockquote>
Step 5. Click on the Save template button. 
 
Now we need to disable the original Blogger lightbox so that it doesn't interfere with this one that we just added. Go to Settings > Posts and comments and on the right side you will see the "Showcase images with Lightbox" section. Select "No" and click on the Save settings button on the upper right side. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdPuID3-RadlYuunaV29yMi3-OHwQ-KNAcpE6c3yH63m66hBV8o-OF1jMUKREa9D2zHwdnMO6Gk_YKt5WF9TLLQNyDSJePSs8DRqk0nZ1lU-IaXkbV1FQTvXCRPTzV-FsK_Fsj0LkdkDd7/s1600/disable-blogger-lightbox.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="disable blogger lightbox" border="0" height="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdPuID3-RadlYuunaV29yMi3-OHwQ-KNAcpE6c3yH63m66hBV8o-OF1jMUKREa9D2zHwdnMO6Gk_YKt5WF9TLLQNyDSJePSs8DRqk0nZ1lU-IaXkbV1FQTvXCRPTzV-FsK_Fsj0LkdkDd7/s1600/disable-blogger-lightbox.png" title="Add a custom jquery lightbox to blogger" width="400" /></a></div>
 
Now view your blog and click on any image to see the lightbox in action.</div>

If you are not satisfied with the default lightbox set up by Blogger, here's another amazing way to show off your images. I have alread...

How to Increase Thumbnail Resolution on Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
When we add a widget on Blogger, the thumbnails will keep a default size of 72 x 72px which might not look good if we try to make them bigger using only CSS. However, with a bit of JavaScript we'll be able to replace the thumbnail with the same image of higher resolution and this way, larger images will no longer appear blurry. 
 
In this tutorial we will see how we can replace the default thumbnail size of the popular posts widget but we can apply this trick on any of the blog widgets. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0R3oRLt0j-aECl1UADTDqMhfJlXK7nkmNh33vqOnYDryL5BRzQ2iHqnCV44slwLNMB2s5KUIQB3GEBEEYO1Mpt-pc_UrF5piGWdq-T-Lgum6qhrAUwPgq7N1ywMXWma6UA1ufVpemRFig/s1600/change-thumbnail-resolution-on-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Increase Thumbnail resolution " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0R3oRLt0j-aECl1UADTDqMhfJlXK7nkmNh33vqOnYDryL5BRzQ2iHqnCV44slwLNMB2s5KUIQB3GEBEEYO1Mpt-pc_UrF5piGWdq-T-Lgum6qhrAUwPgq7N1ywMXWma6UA1ufVpemRFig/s1600/change-thumbnail-resolution-on-blogger.png" title="Increase Thumbnail resolution on Blogger" /></a>.</div>
 
<h3>
Changing the Thumbnail Size for the Popular Posts Widget </h3>
 
Step 1. First, let's add the Popular posts gadget by going to Layout > click on the Add a gadget link and select Popular Posts from the popup window. 
 
Step 2. Go to Template > click on the Edit HTML button > click anywhere inside the code area and press CTRL + F keys to open the Blogger search box. Step 3. Type or paste the </head> tag inside the search box then hit Enter to find it. After you found the </head> tag, add this CSS above it: 
<blockquote class="tr_bq">
<style type='text/css'> 
.PopularPosts .item-thumbnail a { 
clip: auto; 
display: block; 
height: 130px; 
margin: 0 0px 5px; 
overflow: hidden; 
width: 210px; 
border: 2px solid #EEEEEE; 
border-radius: 20px; 
} 
.PopularPosts .item-thumbnail img { 
position: relative; 
top: -30px; 
transition:all .2s linear; 
 -o-transition:all .5s linear; 
-moz-transition:all .2s linear; 
-webkit-transition:all .2s linear; 
} 
.PopularPosts .item-thumbnail img:hover{ 
opacity:.6; 
filter:alpha(opacity=60) 
} 
.PopularPosts .widget-content ul li { 
background: #F9F9F9; 
border: 2px solid #EEEEEE; 
border-radius: 10px; 
box-shadow: 0 4px 10px #EEEEEE; 
color: #555555; 
padding: 10px; 
margin-bottom: 5px; 
} 
.PopularPosts .item-title { 
font: 14px Cambria,Georgia, sans-serif; 
color: #2288BB; 
font-weight: bold; 
text-transform: uppercase; 
text-align: center; 
} 
.PopularPosts .item-snippet { 
display: none; 
} 
.widget .widget-item-control a img { 
height: 18px; 
width: 18px; 
} 
</style></blockquote>
Step 4. Search for the </body> tag and just above it, add this script: 
<blockquote class="tr_bq">
<script type='text/javascript'>                   
function changeThumbSize(id,size){ 
var blogGadget = document.getElementById(id); 
var replacement = blogGadget.innerHTML; 
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c"); 
var thumbnails = blogGadget.getElementsByTagName("img"); 
for(var i=0;i&lt;thumbnails.length;i++){ 
thumbnails[i].width = size; 
thumbnails[i].height = size; 
} 
} 
changeThumbSize("PopularPosts1",210);                   
</script></blockquote>
What I highlighted in red is the widget ID for the Popular Posts gadget - to change the thumbnails size for any of your blog widgets, first you need to find the gadget/widge ID and then add a line below this part: 
<blockquote class="tr_bq">
changeThumbSize("PopularPosts1",210); 
changeThumbSize("widget-ID-HERE",210);</blockquote>
 ... and replace widget-ID-HERE text with the ID of that widget/gadget. 
 
Note: you'll not be able to see the changes if the widget has a class selector - for this you will need to change class with id and replace the dot "." symbol with "#" within the CSS... 
 
Step 5. Finally, Save the Template.  
 
 If you need more help, please leave a comment below.</div>

Blog Design css Image Effects javascript popular posts Widgets How to Increase Thumbnail Resolution on Blogger

When we add a widget on Blogger, the thumbnails will keep a default size of 72 x 72px which might not look good if we try to make them bigg...

Create a CSS3 Image Hover Effect with Animated Vinyl Record

<div dir="ltr" style="text-align: left;" trbidi="on">
Here is an amazing CSS image effect to reveal more information on your images with a really cool CSS3 hover animation. This is just perfect for blogs dedicated to music or if you just want to show off the music that you love. 
 
So, what we will do in this tutorial is to take an image for our album cover, add some fancy CSS3 transitions and transforms that, on hover, will slide out a pure-CSS vinyl record behind it. Finally, we will add some basic HTML to our post or page where we need to apply this amazing effect. 
<div class="ssmainhide" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOzuKEwK9nshDuU4TPVWHhJvC8AHdjhB2lb4Rhdayx79u-HWISr_pp10IioK5ktCuwjPGOJWkKSp7TcNrIJr2GrQFm28-mV0sgfovqxhv594YayXLf3WcmsquFMRT8Zfh6oOYUFFoyJ97N/s1600/create-css3-animated-vinyl-record-for-blogger-images.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOzuKEwK9nshDuU4TPVWHhJvC8AHdjhB2lb4Rhdayx79u-HWISr_pp10IioK5ktCuwjPGOJWkKSp7TcNrIJr2GrQFm28-mV0sgfovqxhv594YayXLf3WcmsquFMRT8Zfh6oOYUFFoyJ97N/s1600/create-css3-animated-vinyl-record-for-blogger-images.png" /></a></div>
 
Demo: hover over the album cover and see how CSS reveals further information: 
 
 
<div class="case">
<div class="overlay">
</div>
<img class="cover" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvJdmN7FboTReDhZ1Zs0cIkyDUGkv-7DxZqALBDSOZeorrOUeL_g2SmKaqYFKJwPphAXZwm3pk6hXC8DZBW0CVZZ3sqnDY18ePYBMr14HQMGb3DZx2szylfxmHrsSV_DBYVs4I6fwotYA/s1600/pink-floyd-the-wall.jpg" />The Wall is the eleventh studio album by the English progressive rock group Pink Floyd. 
<div class="slotwrapper">
<div class="slot">
</div>
</div>
<div class="vinyl">
</div>
</div>
 
 
<h3>
How to Apply The Animated Vinyl Record on Blogger Images</h3>
 
Step 1. From your <a href="http://blogger.com/" rel="nofollow" style="color: blue;">Blogger's Dashboard</a>, go to Template > click on the Edit HTML button: 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" width="320" /></a></div>
 
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box: 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDVG1ZUrMm5r-4tRVKJL02cM8DT7kHGdqxRz6uDFRue0vwRl-FJ_t0hMykmqsCAVMegEt4Q70WeIRdLqcER9yUk91HBVuXSmg-x7RjhgLPWUP8R2BTIMUPadK6-5omAOdgSYoxJX_C-L6N/s1600/blogger-template-search-box.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDVG1ZUrMm5r-4tRVKJL02cM8DT7kHGdqxRz6uDFRue0vwRl-FJ_t0hMykmqsCAVMegEt4Q70WeIRdLqcER9yUk91HBVuXSmg-x7RjhgLPWUP8R2BTIMUPadK6-5omAOdgSYoxJX_C-L6N/s1600/blogger-template-search-box.png" width="320" /></a></div>
Step 3. Type or paste inside the search box the tag below and hit Enter to find it: 
<blockquote class="tr_bq">
]]></b:skin></blockquote>
Step 4. Just above ]]></b:skin> add the following code: 
 
<style>.checked-selector {display: none;} :checked ~ .checked-selector {display: block;} input.hidden[type=checkbox] {position: absolute;left: -999em;} </style> <label for="toggle-hidden">Click to expand the code</label><input class="hidden" id="toggle-hidden" type="checkbox" /> 
<div class="checked-selector">
<blockquote class="tr_bq">
.info { 
position: absolute; 
z-index: 3; 
top: 20%; 
zoom: 1; 
filter: alpha(opacity=0); 
opacity: 0; 
padding: 10px; 
text-align: center; 
color: #eee; 
font-size: 13px; 
font-weight: bold; 
background: #333; 
background: rgba(0,0,0,.7); 
-moz-transition:all linear 0.5s 0s; 
-webkit-transition:all linear 0.5s 0s; 
transition:all ease 0.5s 0s; 
} 
.case:hover .info, .case:hover .vinyl { 
filter: alpha(opacity=100); 
opacity:1; 
} 
.case { 
position:relative; 
display:block; 
width:185px; 
height:185px; 
-webkit-border-radius:3px; 
border-radius:3px; 
z-index:2; 
-webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2); 
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2); 
margin:0 auto; 
} 
.case:after { 
position:absolute; 
display:block; 
content: ""; 
width:265px; 
height:10px; 
left:-40px; 
bottom:-8px; 
z-index:1; 
background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 50%, rgba(225,225,225,0) 51%, rgba(246,246,246,0) 100%); 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.45)), color-stop(50%,rgba(0,0,0,0)), color-stop(51%,rgba(225,225,225,0)), color-stop(100%,rgba(246,246,246,0))); 
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); 
    background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); 
    background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); 
    background: radial-gradient(center, ellipse cover,  rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); 
} 
.case .cover{ 
position:absolute; 
top:0; 
left:0; 
width:100%; 
height:100%; 
z-index:2; 
-webkit-border-radius:3px; 
border-radius:3px; 
-webkit-box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.6); 
box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.6); 
} 
.case .overlay{ 
position:absolute; 
display:block; 
top:0; 
left:0; 
z-index:3; 
width:100%; 
height:100%; 
-webkit-box-shadow: inset 1px 1px 4px 0px rgba(255, 255, 255, 0.45),inset 1px 1px 2px 0px rgba(255,255, 255, 0.5),inset -1px -1px 2px 0px rgba(255,255, 255, 0.5); 
    box-shadow: inset 1px 1px 4px 0px rgba(255,255, 255, 0.45),inset 1px 1px 2px 0px rgba(255,255, 255, 0.5),inset -1px -1px 2px 0px rgba(255,255, 255, 0.5); 
-webkit-border-radius:3px; 
border-radius:3px; 
border:1px solid rgba(0, 0, 0, 0.35); 
} 
.case .overlay:before{ 
    position:absolute; 
    display:block; 
    content: ""; 
    top:0; 
    left:0; 
    z-index:4; 
    width:100%; 
    height:100%; 
    background: -moz-linear-gradient(-55deg,  rgba(255,255,255,0.1) 0%, rgba(244,244,244,0.35) 50%, rgba(225,225,225,0) 51%, rgba(246,246,246,0) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0.1)), color-stop(50%,rgba(244,244,244,0.35)), color-stop(51%,rgba(225,225,225,0)), color-stop(100%,rgba(246,246,246,0))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0.1) 0%,rgba(244,244,244,0.35) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(-45deg,  rgba(255,255,255,0.1) 0%,rgba(244,244,244,0.35) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0.1) 0%,rgba(244,244,244,0.35) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); /* IE10+ */ 
    background: linear-gradient(-55deg,  rgba(255,255,255,0.1) 0%,rgba(244,244,244,0.35) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); /* W3C */ 
    -webkit-border-radius:3px; 
    border-radius:3px; 
} 
.vinyl { 
    position:absolute; 
    z-index:1; 
    bottom:4px; 
    left:5px; 
    display:block; 
    width:175px; 
    height:175px; 
    border-radius:200px; 
    background: -moz-linear-gradient(top,  rgba(45,45,45,1) 0%, rgba(0,0,0,1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(45,45,45,1)), color-stop(100%,rgba(0,0,0,1))); 
    background: -webkit-linear-gradient(top,  rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%); 
    background: -o-linear-gradient(top,  rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%); 
    background: -ms-linear-gradient(top,  rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%); 
    background: linear-gradient(top,  rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%); 
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(255, 255, 255, 1); 
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.35), inset 0px -1px 1px 0px rgba(255, 255, 255, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.4); 
    border:1px solid #595959; 
    transition: all 500ms ease-in-out; 
    -moz-transition: all 500ms ease-in-out; 
    -webkit-transition: all 500ms ease-in-out; 
    -o-transition: all 500ms ease-in-out; 
} 
.case:hover .vinyl { 
    animation: spin 600ms ease-in-out; 
    -moz-animation: spin 600ms ease-in-out; 
    -webkit-animation: spin 600ms ease-in-out; 
    left:98px; 
} 
.vinyl:before { 
    position:absolute; 
    display:block; 
    content: ""; 
    width:100%; 
    height:100%; 
    border-radius:100%; 
    background: -moz-radial-gradient(center, ellipse cover,  rgba(38,38,38,0.4) 0%, rgba(89,89,89,0.4) 1%, rgba(35,35,35,0.4) 2%, rgba(86,86,86,0.4) 3%, rgba(35,35,35,0.4) 4%, rgba(86,86,86,0.4) 5%, rgba(35,35,35,0.4) 6%, rgba(86,86,86,0.4) 7%, rgba(35,35,35,0.4) 8%, rgba(86,86,86,0.4) 9%, rgba(35,35,35,0.4) 10%, rgba(86,86,86,0.4) 11%, rgba(35,35,35,0.4) 12%, rgba(86,86,86,0.4) 13%, rgba(35,35,35,0.4) 14%, rgba(86,86,86,0.4) 15%, rgba(35,35,35,0.4) 16%, rgba(86,86,86,0.4) 17%, rgba(35,35,35,0.4) 18%, rgba(86,86,86,0.4) 19%, rgba(35,35,35,0.4) 20%, rgba(86,86,86,0.4) 21%, rgba(35,35,35,0.4) 22%, rgba(86,86,86,0.4) 23%, rgba(35,35,35,0.4) 24%, rgba(86,86,86,0.4) 25%, rgba(35,35,35,0.4) 26%, rgba(86,86,86,0.4) 27%, rgba(35,35,35,0.4) 28%, rgba(86,86,86,0.4) 29%, rgba(35,35,35,0.4) 30%, rgba(86,86,86,0.4) 31%, rgba(35,35,35,0.4) 32%, rgba(86,86,86,0.4) 33%, rgba(35,35,35,0.4) 34%, rgba(86,86,86,0.4) 35%, rgba(35,35,35,0.4) 36%, rgba(86,86,86,0.4) 37%, rgba(35,35,35,0.4) 38%, rgba(86,86,86,0.4) 39%, rgba(35,35,35,0.4) 40%, rgba(86,86,86,0.4) 41%, rgba(35,35,35,0.4) 42%, rgba(86,86,86,0.4) 43%, rgba(35,35,35,0.4) 44%, rgba(86,86,86,0.4) 45%, rgba(35,35,35,0.4) 46%, rgba(86,86,86,0.4) 47%, rgba(35,35,35,0.4) 48%, rgba(86,86,86,0.4) 49%, rgba(35,35,35,0.4) 50%, rgba(86,86,86,0.4) 51%, rgba(35,35,35,0.4) 52%, rgba(86,86,86,0.4) 53%, rgba(35,35,35,0.4) 54%, rgba(86,86,86,0.4) 55%, rgba(35,35,35,0.4) 56%, rgba(86,86,86,0.4) 57%, rgba(35,35,35,0.4) 58%, rgba(86,86,86,0.4) 59%, rgba(35,35,35,0.4) 60%, rgba(86,86,86,0.4) 61%, rgba(35,35,35,0.4) 62%, rgba(86,86,86,0.4) 63%, rgba(35,35,35,0.4) 64%, rgba(86,86,86,0.4) 65%, rgba(35,35,35,0.4) 66%, rgba(86,86,86,0.4) 67%, rgba(35,35,35,0.4) 68%, rgba(86,86,86,0.4) 69%, rgba(35,35,35,0.4) 70%, rgba(86,86,86,0.4) 71%, rgba(35,35,35,0.4) 72%, rgba(86,86,86,0.4) 73%, rgba(35,35,35,0.4) 74%, rgba(86,86,86,0.4) 75%, rgba(35,35,35,0.4) 76%, rgba(86,86,86,0.4) 77%, rgba(35,35,35,0.4) 78%, rgba(86,86,86,0.4) 79%, rgba(35,35,35,0.4) 80%, rgba(86,86,86,0.4) 81%, rgba(35,35,35,0.4) 82%, rgba(86,86,86,0.4) 83%, rgba(35,35,35,0.4) 84%, rgba(86,86,86,0.4) 85%, rgba(35,35,35,0.4) 86%, rgba(86,86,86,0.4) 87%, rgba(35,35,35,0.4) 88%, rgba(86,86,86,0.4) 89%, rgba(35,35,35,0.4) 90%, rgba(86,86,86,0.4) 91%, rgba(35,35,35,0.4) 92%, rgba(86,86,86,0.4) 93%, rgba(35,35,35,0.4) 94%, rgba(86,86,86,0.4) 95%, rgba(35,35,35,0.4) 96%, rgba(86,86,86,0.4) 97%, rgba(86,86,86,0.4) 97%, rgba(35,35,35,0.4) 98%); 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(38,38,38,0.4)), color-stop(1%,rgba(89,89,89,0.4)), color-stop(2%,rgba(35,35,35,0.4)), color-stop(3%,rgba(86,86,86,0.4)), color-stop(4%,rgba(35,35,35,0.4)), color-stop(5%,rgba(86,86,86,0.4)), color-stop(6%,rgba(35,35,35,0.4)), color-stop(7%,rgba(86,86,86,0.4)), color-stop(8%,rgba(35,35,35,0.4)), color-stop(9%,rgba(86,86,86,0.4)), color-stop(10%,rgba(35,35,35,0.4)), color-stop(11%,rgba(86,86,86,0.4)), color-stop(12%,rgba(35,35,35,0.4)), color-stop(13%,rgba(86,86,86,0.4)), color-stop(14%,rgba(35,35,35,0.4)), color-stop(15%,rgba(86,86,86,0.4)), color-stop(16%,rgba(35,35,35,0.4)), color-stop(17%,rgba(86,86,86,0.4)), color-stop(18%,rgba(35,35,35,0.4)), color-stop(19%,rgba(86,86,86,0.4)), color-stop(20%,rgba(35,35,35,0.4)), color-stop(21%,rgba(86,86,86,0.4)), color-stop(22%,rgba(35,35,35,0.4)), color-stop(23%,rgba(86,86,86,0.4)), color-stop(24%,rgba(35,35,35,0.4)), color-stop(25%,rgba(86,86,86,0.4)), color-stop(26%,rgba(35,35,35,0.4)), color-stop(27%,rgba(86,86,86,0.4)), color-stop(28%,rgba(35,35,35,0.4)), color-stop(29%,rgba(86,86,86,0.4)), color-stop(30%,rgba(35,35,35,0.4)), color-stop(31%,rgba(86,86,86,0.4)), color-stop(32%,rgba(35,35,35,0.4)), color-stop(33%,rgba(86,86,86,0.4)), color-stop(34%,rgba(35,35,35,0.4)), color-stop(35%,rgba(86,86,86,0.4)), color-stop(36%,rgba(35,35,35,0.4)), color-stop(37%,rgba(86,86,86,0.4)), color-stop(38%,rgba(35,35,35,0.4)), color-stop(39%,rgba(86,86,86,0.4)), color-stop(40%,rgba(35,35,35,0.4)), color-stop(41%,rgba(86,86,86,0.4)), color-stop(42%,rgba(35,35,35,0.4)), color-stop(43%,rgba(86,86,86,0.4)), color-stop(44%,rgba(35,35,35,0.4)), color-stop(45%,rgba(86,86,86,0.4)), color-stop(46%,rgba(35,35,35,0.4)), color-stop(47%,rgba(86,86,86,0.4)), color-stop(48%,rgba(35,35,35,0.4)), color-stop(49%,rgba(86,86,86,0.4)), color-stop(50%,rgba(35,35,35,0.4)), color-stop(51%,rgba(86,86,86,0.4)), color-stop(52%,rgba(35,35,35,0.4)), color-stop(53%,rgba(86,86,86,0.4)), color-stop(54%,rgba(35,35,35,0.4)), color-stop(55%,rgba(86,86,86,0.4)), color-stop(56%,rgba(35,35,35,0.4)), color-stop(57%,rgba(86,86,86,0.4)), color-stop(58%,rgba(35,35,35,0.4)), color-stop(59%,rgba(86,86,86,0.4)), color-stop(60%,rgba(35,35,35,0.4)), color-stop(61%,rgba(86,86,86,0.4)), color-stop(62%,rgba(35,35,35,0.4)), color-stop(63%,rgba(86,86,86,0.4)), color-stop(64%,rgba(35,35,35,0.4)), color-stop(65%,rgba(86,86,86,0.4)), color-stop(66%,rgba(35,35,35,0.4)), color-stop(67%,rgba(86,86,86,0.4)), color-stop(68%,rgba(35,35,35,0.4)), color-stop(69%,rgba(86,86,86,0.4)), color-stop(70%,rgba(35,35,35,0.4)), color-stop(71%,rgba(86,86,86,0.4)), color-stop(72%,rgba(35,35,35,0.4)), color-stop(73%,rgba(86,86,86,0.4)), color-stop(74%,rgba(35,35,35,0.4)), color-stop(75%,rgba(86,86,86,0.4)), color-stop(76%,rgba(35,35,35,0.4)), color-stop(77%,rgba(86,86,86,0.4)), color-stop(78%,rgba(35,35,35,0.4)), color-stop(79%,rgba(86,86,86,0.4)), color-stop(80%,rgba(35,35,35,0.4)), color-stop(81%,rgba(86,86,86,0.4)), color-stop(82%,rgba(35,35,35,0.4)), color-stop(83%,rgba(86,86,86,0.4)), color-stop(84%,rgba(35,35,35,0.4)), color-stop(85%,rgba(86,86,86,0.4)), color-stop(86%,rgba(35,35,35,0.4)), color-stop(87%,rgba(86,86,86,0.4)), color-stop(88%,rgba(35,35,35,0.4)), color-stop(89%,rgba(86,86,86,0.4)), color-stop(90%,rgba(35,35,35,0.4)), color-stop(91%,rgba(86,86,86,0.4)), color-stop(92%,rgba(35,35,35,0.4)), color-stop(93%,rgba(86,86,86,0.4)), color-stop(94%,rgba(35,35,35,0.4)), color-stop(95%,rgba(86,86,86,0.4)), color-stop(96%,rgba(35,35,35,0.4)), color-stop(97%,rgba(86,86,86,0.4)), color-stop(97%,rgba(86,86,86,0.4)), color-stop(98%,rgba(35,35,35,0.4))); 
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(38,38,38,0.4) 0%,rgba(89,89,89,0.4) 1%,rgba(35,35,35,0.4) 2%,rgba(86,86,86,0.4) 3%,rgba(35,35,35,0.4) 4%,rgba(86,86,86,0.4) 5%,rgba(35,35,35,0.4) 6%,rgba(86,86,86,0.4) 7%,rgba(35,35,35,0.4) 8%,rgba(86,86,86,0.4) 9%,rgba(35,35,35,0.4) 10%,rgba(86,86,86,0.4) 11%,rgba(35,35,35,0.4) 12%,rgba(86,86,86,0.4) 13%,rgba(35,35,35,0.4) 14%,rgba(86,86,86,0.4) 15%,rgba(35,35,35,0.4) 16%,rgba(86,86,86,0.4) 17%,rgba(35,35,35,0.4) 18%,rgba(86,86,86,0.4) 19%,rgba(35,35,35,0.4) 20%,rgba(86,86,86,0.4) 21%,rgba(35,35,35,0.4) 22%,rgba(86,86,86,0.4) 23%,rgba(35,35,35,0.4) 24%,rgba(86,86,86,0.4) 25%,rgba(35,35,35,0.4) 26%,rgba(86,86,86,0.4) 27%,rgba(35,35,35,0.4) 28%,rgba(86,86,86,0.4) 29%,rgba(35,35,35,0.4) 30%,rgba(86,86,86,0.4) 31%,rgba(35,35,35,0.4) 32%,rgba(86,86,86,0.4) 33%,rgba(35,35,35,0.4) 34%,rgba(86,86,86,0.4) 35%,rgba(35,35,35,0.4) 36%,rgba(86,86,86,0.4) 37%,rgba(35,35,35,0.4) 38%,rgba(86,86,86,0.4) 39%,rgba(35,35,35,0.4) 40%,rgba(86,86,86,0.4) 41%,rgba(35,35,35,0.4) 42%,rgba(86,86,86,0.4) 43%,rgba(35,35,35,0.4) 44%,rgba(86,86,86,0.4) 45%,rgba(35,35,35,0.4) 46%,rgba(86,86,86,0.4) 47%,rgba(35,35,35,0.4) 48%,rgba(86,86,86,0.4) 49%,rgba(35,35,35,0.4) 50%,rgba(86,86,86,0.4) 51%,rgba(35,35,35,0.4) 52%,rgba(86,86,86,0.4) 53%,rgba(35,35,35,0.4) 54%,rgba(86,86,86,0.4) 55%,rgba(35,35,35,0.4) 56%,rgba(86,86,86,0.4) 57%,rgba(35,35,35,0.4) 58%,rgba(86,86,86,0.4) 59%,rgba(35,35,35,0.4) 60%,rgba(86,86,86,0.4) 61%,rgba(35,35,35,0.4) 62%,rgba(86,86,86,0.4) 63%,rgba(35,35,35,0.4) 64%,rgba(86,86,86,0.4) 65%,rgba(35,35,35,0.4) 66%,rgba(86,86,86,0.4) 67%,rgba(35,35,35,0.4) 68%,rgba(86,86,86,0.4) 69%,rgba(35,35,35,0.4) 70%,rgba(86,86,86,0.4) 71%,rgba(35,35,35,0.4) 72%,rgba(86,86,86,0.4) 73%,rgba(35,35,35,0.4) 74%,rgba(86,86,86,0.4) 75%,rgba(35,35,35,0.4) 76%,rgba(86,86,86,0.4) 77%,rgba(35,35,35,0.4) 78%,rgba(86,86,86,0.4) 79%,rgba(35,35,35,0.4) 80%,rgba(86,86,86,0.4) 81%,rgba(35,35,35,0.4) 82%,rgba(86,86,86,0.4) 83%,rgba(35,35,35,0.4) 84%,rgba(86,86,86,0.4) 85%,rgba(35,35,35,0.4) 86%,rgba(86,86,86,0.4) 87%,rgba(35,35,35,0.4) 88%,rgba(86,86,86,0.4) 89%,rgba(35,35,35,0.4) 90%,rgba(86,86,86,0.4) 91%,rgba(35,35,35,0.4) 92%,rgba(86,86,86,0.4) 93%,rgba(35,35,35,0.4) 94%,rgba(86,86,86,0.4) 95%,rgba(35,35,35,0.4) 96%,rgba(86,86,86,0.4) 97%,rgba(86,86,86,0.4) 97%,rgba(35,35,35,0.4) 98%); 
    background: -o-radial-gradient(center, ellipse cover,  rgba(38,38,38,0.4) 0%,rgba(89,89,89,0.4) 1%,rgba(35,35,35,0.4) 2%,rgba(86,86,86,0.4) 3%,rgba(35,35,35,0.4) 4%,rgba(86,86,86,0.4) 5%,rgba(35,35,35,0.4) 6%,rgba(86,86,86,0.4) 7%,rgba(35,35,35,0.4) 8%,rgba(86,86,86,0.4) 9%,rgba(35,35,35,0.4) 10%,rgba(86,86,86,0.4) 11%,rgba(35,35,35,0.4) 12%,rgba(86,86,86,0.4) 13%,rgba(35,35,35,0.4) 14%,rgba(86,86,86,0.4) 15%,rgba(35,35,35,0.4) 16%,rgba(86,86,86,0.4) 17%,rgba(35,35,35,0.4) 18%,rgba(86,86,86,0.4) 19%,rgba(35,35,35,0.4) 20%,rgba(86,86,86,0.4) 21%,rgba(35,35,35,0.4) 22%,rgba(86,86,86,0.4) 23%,rgba(35,35,35,0.4) 24%,rgba(86,86,86,0.4) 25%,rgba(35,35,35,0.4) 26%,rgba(86,86,86,0.4) 27%,rgba(35,35,35,0.4) 28%,rgba(86,86,86,0.4) 29%,rgba(35,35,35,0.4) 30%,rgba(86,86,86,0.4) 31%,rgba(35,35,35,0.4) 32%,rgba(86,86,86,0.4) 33%,rgba(35,35,35,0.4) 34%,rgba(86,86,86,0.4) 35%,rgba(35,35,35,0.4) 36%,rgba(86,86,86,0.4) 37%,rgba(35,35,35,0.4) 38%,rgba(86,86,86,0.4) 39%,rgba(35,35,35,0.4) 40%,rgba(86,86,86,0.4) 41%,rgba(35,35,35,0.4) 42%,rgba(86,86,86,0.4) 43%,rgba(35,35,35,0.4) 44%,rgba(86,86,86,0.4) 45%,rgba(35,35,35,0.4) 46%,rgba(86,86,86,0.4) 47%,rgba(35,35,35,0.4) 48%,rgba(86,86,86,0.4) 49%,rgba(35,35,35,0.4) 50%,rgba(86,86,86,0.4) 51%,rgba(35,35,35,0.4) 52%,rgba(86,86,86,0.4) 53%,rgba(35,35,35,0.4) 54%,rgba(86,86,86,0.4) 55%,rgba(35,35,35,0.4) 56%,rgba(86,86,86,0.4) 57%,rgba(35,35,35,0.4) 58%,rgba(86,86,86,0.4) 59%,rgba(35,35,35,0.4) 60%,rgba(86,86,86,0.4) 61%,rgba(35,35,35,0.4) 62%,rgba(86,86,86,0.4) 63%,rgba(35,35,35,0.4) 64%,rgba(86,86,86,0.4) 65%,rgba(35,35,35,0.4) 66%,rgba(86,86,86,0.4) 67%,rgba(35,35,35,0.4) 68%,rgba(86,86,86,0.4) 69%,rgba(35,35,35,0.4) 70%,rgba(86,86,86,0.4) 71%,rgba(35,35,35,0.4) 72%,rgba(86,86,86,0.4) 73%,rgba(35,35,35,0.4) 74%,rgba(86,86,86,0.4) 75%,rgba(35,35,35,0.4) 76%,rgba(86,86,86,0.4) 77%,rgba(35,35,35,0.4) 78%,rgba(86,86,86,0.4) 79%,rgba(35,35,35,0.4) 80%,rgba(86,86,86,0.4) 81%,rgba(35,35,35,0.4) 82%,rgba(86,86,86,0.4) 83%,rgba(35,35,35,0.4) 84%,rgba(86,86,86,0.4) 85%,rgba(35,35,35,0.4) 86%,rgba(86,86,86,0.4) 87%,rgba(35,35,35,0.4) 88%,rgba(86,86,86,0.4) 89%,rgba(35,35,35,0.4) 90%,rgba(86,86,86,0.4) 91%,rgba(35,35,35,0.4) 92%,rgba(86,86,86,0.4) 93%,rgba(35,35,35,0.4) 94%,rgba(86,86,86,0.4) 95%,rgba(35,35,35,0.4) 96%,rgba(86,86,86,0.4) 97%,rgba(86,86,86,0.4) 97%,rgba(35,35,35,0.4) 98%); 
    background: -ms-radial-gradient(center, ellipse cover,  rgba(38,38,38,0.4) 0%,rgba(89,89,89,0.4) 1%,rgba(35,35,35,0.4) 2%,rgba(86,86,86,0.4) 3%,rgba(35,35,35,0.4) 4%,rgba(86,86,86,0.4) 5%,rgba(35,35,35,0.4) 6%,rgba(86,86,86,0.4) 7%,rgba(35,35,35,0.4) 8%,rgba(86,86,86,0.4) 9%,rgba(35,35,35,0.4) 10%,rgba(86,86,86,0.4) 11%,rgba(35,35,35,0.4) 12%,rgba(86,86,86,0.4) 13%,rgba(35,35,35,0.4) 14%,rgba(86,86,86,0.4) 15%,rgba(35,35,35,0.4) 16%,rgba(86,86,86,0.4) 17%,rgba(35,35,35,0.4) 18%,rgba(86,86,86,0.4) 19%,rgba(35,35,35,0.4) 20%,rgba(86,86,86,0.4) 21%,rgba(35,35,35,0.4) 22%,rgba(86,86,86,0.4) 23%,rgba(35,35,35,0.4) 24%,rgba(86,86,86,0.4) 25%,rgba(35,35,35,0.4) 26%,rgba(86,86,86,0.4) 27%,rgba(35,35,35,0.4) 28%,rgba(86,86,86,0.4) 29%,rgba(35,35,35,0.4) 30%,rgba(86,86,86,0.4) 31%,rgba(35,35,35,0.4) 32%,rgba(86,86,86,0.4) 33%,rgba(35,35,35,0.4) 34%,rgba(86,86,86,0.4) 35%,rgba(35,35,35,0.4) 36%,rgba(86,86,86,0.4) 37%,rgba(35,35,35,0.4) 38%,rgba(86,86,86,0.4) 39%,rgba(35,35,35,0.4) 40%,rgba(86,86,86,0.4) 41%,rgba(35,35,35,0.4) 42%,rgba(86,86,86,0.4) 43%,rgba(35,35,35,0.4) 44%,rgba(86,86,86,0.4) 45%,rgba(35,35,35,0.4) 46%,rgba(86,86,86,0.4) 47%,rgba(35,35,35,0.4) 48%,rgba(86,86,86,0.4) 49%,rgba(35,35,35,0.4) 50%,rgba(86,86,86,0.4) 51%,rgba(35,35,35,0.4) 52%,rgba(86,86,86,0.4) 53%,rgba(35,35,35,0.4) 54%,rgba(86,86,86,0.4) 55%,rgba(35,35,35,0.4) 56%,rgba(86,86,86,0.4) 57%,rgba(35,35,35,0.4) 58%,rgba(86,86,86,0.4) 59%,rgba(35,35,35,0.4) 60%,rgba(86,86,86,0.4) 61%,rgba(35,35,35,0.4) 62%,rgba(86,86,86,0.4) 63%,rgba(35,35,35,0.4) 64%,rgba(86,86,86,0.4) 65%,rgba(35,35,35,0.4) 66%,rgba(86,86,86,0.4) 67%,rgba(35,35,35,0.4) 68%,rgba(86,86,86,0.4) 69%,rgba(35,35,35,0.4) 70%,rgba(86,86,86,0.4) 71%,rgba(35,35,35,0.4) 72%,rgba(86,86,86,0.4) 73%,rgba(35,35,35,0.4) 74%,rgba(86,86,86,0.4) 75%,rgba(35,35,35,0.4) 76%,rgba(86,86,86,0.4) 77%,rgba(35,35,35,0.4) 78%,rgba(86,86,86,0.4) 79%,rgba(35,35,35,0.4) 80%,rgba(86,86,86,0.4) 81%,rgba(35,35,35,0.4) 82%,rgba(86,86,86,0.4) 83%,rgba(35,35,35,0.4) 84%,rgba(86,86,86,0.4) 85%,rgba(35,35,35,0.4) 86%,rgba(86,86,86,0.4) 87%,rgba(35,35,35,0.4) 88%,rgba(86,86,86,0.4) 89%,rgba(35,35,35,0.4) 90%,rgba(86,86,86,0.4) 91%,rgba(35,35,35,0.4) 92%,rgba(86,86,86,0.4) 93%,rgba(35,35,35,0.4) 94%,rgba(86,86,86,0.4) 95%,rgba(35,35,35,0.4) 96%,rgba(86,86,86,0.4) 97%,rgba(86,86,86,0.4) 97%,rgba(35,35,35,0.4) 98%); 
    background: radial-gradient(center, ellipse cover,  rgba(38,38,38,0.4) 0%,rgba(89,89,89,0.4) 1%,rgba(35,35,35,0.4) 2%,rgba(86,86,86,0.4) 3%,rgba(35,35,35,0.4) 4%,rgba(86,86,86,0.4) 5%,rgba(35,35,35,0.4) 6%,rgba(86,86,86,0.4) 7%,rgba(35,35,35,0.4) 8%,rgba(86,86,86,0.4) 9%,rgba(35,35,35,0.4) 10%,rgba(86,86,86,0.4) 11%,rgba(35,35,35,0.4) 12%,rgba(86,86,86,0.4) 13%,rgba(35,35,35,0.4) 14%,rgba(86,86,86,0.4) 15%,rgba(35,35,35,0.4) 16%,rgba(86,86,86,0.4) 17%,rgba(35,35,35,0.4) 18%,rgba(86,86,86,0.4) 19%,rgba(35,35,35,0.4) 20%,rgba(86,86,86,0.4) 21%,rgba(35,35,35,0.4) 22%,rgba(86,86,86,0.4) 23%,rgba(35,35,35,0.4) 24%,rgba(86,86,86,0.4) 25%,rgba(35,35,35,0.4) 26%,rgba(86,86,86,0.4) 27%,rgba(35,35,35,0.4) 28%,rgba(86,86,86,0.4) 29%,rgba(35,35,35,0.4) 30%,rgba(86,86,86,0.4) 31%,rgba(35,35,35,0.4) 32%,rgba(86,86,86,0.4) 33%,rgba(35,35,35,0.4) 34%,rgba(86,86,86,0.4) 35%,rgba(35,35,35,0.4) 36%,rgba(86,86,86,0.4) 37%,rgba(35,35,35,0.4) 38%,rgba(86,86,86,0.4) 39%,rgba(35,35,35,0.4) 40%,rgba(86,86,86,0.4) 41%,rgba(35,35,35,0.4) 42%,rgba(86,86,86,0.4) 43%,rgba(35,35,35,0.4) 44%,rgba(86,86,86,0.4) 45%,rgba(35,35,35,0.4) 46%,rgba(86,86,86,0.4) 47%,rgba(35,35,35,0.4) 48%,rgba(86,86,86,0.4) 49%,rgba(35,35,35,0.4) 50%,rgba(86,86,86,0.4) 51%,rgba(35,35,35,0.4) 52%,rgba(86,86,86,0.4) 53%,rgba(35,35,35,0.4) 54%,rgba(86,86,86,0.4) 55%,rgba(35,35,35,0.4) 56%,rgba(86,86,86,0.4) 57%,rgba(35,35,35,0.4) 58%,rgba(86,86,86,0.4) 59%,rgba(35,35,35,0.4) 60%,rgba(86,86,86,0.4) 61%,rgba(35,35,35,0.4) 62%,rgba(86,86,86,0.4) 63%,rgba(35,35,35,0.4) 64%,rgba(86,86,86,0.4) 65%,rgba(35,35,35,0.4) 66%,rgba(86,86,86,0.4) 67%,rgba(35,35,35,0.4) 68%,rgba(86,86,86,0.4) 69%,rgba(35,35,35,0.4) 70%,rgba(86,86,86,0.4) 71%,rgba(35,35,35,0.4) 72%,rgba(86,86,86,0.4) 73%,rgba(35,35,35,0.4) 74%,rgba(86,86,86,0.4) 75%,rgba(35,35,35,0.4) 76%,rgba(86,86,86,0.4) 77%,rgba(35,35,35,0.4) 78%,rgba(86,86,86,0.4) 79%,rgba(35,35,35,0.4) 80%,rgba(86,86,86,0.4) 81%,rgba(35,35,35,0.4) 82%,rgba(86,86,86,0.4) 83%,rgba(35,35,35,0.4) 84%,rgba(86,86,86,0.4) 85%,rgba(35,35,35,0.4) 86%,rgba(86,86,86,0.4) 87%,rgba(35,35,35,0.4) 88%,rgba(86,86,86,0.4) 89%,rgba(35,35,35,0.4) 90%,rgba(86,86,86,0.4) 91%,rgba(35,35,35,0.4) 92%,rgba(86,86,86,0.4) 93%,rgba(35,35,35,0.4) 94%,rgba(86,86,86,0.4) 95%,rgba(35,35,35,0.4) 96%,rgba(86,86,86,0.4) 97%,rgba(86,86,86,0.4) 97%,rgba(35,35,35,0.4) 98%); 
    top:0; 
    left:0; 
} 
.vinyl:after { 
    position:absolute; 
    display:block; 
    content: "\002022"; 
    width:34px; 
    height:53px; 
    line-height:53px; 
    border-radius:53px; 
    top:60px; 
    left:60px; 
    padding-left:19px; 
    color:#000; 
    background: -moz-linear-gradient(-45deg,  rgba(252,252,252,1) 0%, rgba(239,239,239,1) 100%); 
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(239,239,239,1))); 
    background: -webkit-linear-gradient(-45deg,  rgba(252,252,252,1) 0%,rgba(239,239,239,1) 100%); 
    background: -o-linear-gradient(-45deg,  rgba(252,252,252,1) 0%,rgba(239,239,239,1) 100%); 
    background: -ms-linear-gradient(-45deg,  rgba(252,252,252,1) 0%,rgba(239,239,239,1) 100%); 
    background: linear-gradient(-45deg,  rgba(252,252,252,1) 0%,rgba(239,239,239,1) 100%); 
    border:1px solid #000; 
    font-size:40px; 
    text-shadow: 0px 0px 3px rgba(0,0,0, 0.8); 
} 
.slotwrapper { 
    position:absolute; 
    display:block; 
    top:0px; 
    right:-10px; 
    height:100%; 
    width:10px; 
    overflow:hidden; 
} 
.slot{ 
    position:absolute; 
    display:block; 
    top:-160px; 
    left:-67px; 
    height:505px; 
    width:85px; 
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(76,76,76,1) 51%, rgba(76,76,76,0) 52%, rgba(0,0,0,0.1) 53%, rgba(0,0,0,0) 58%); 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(255,255,255,1)), color-stop(51%,rgba(76,76,76,1)), color-stop(52%,rgba(76,76,76,0)), color-stop(53%,rgba(0,0,0,0.1)), color-stop(58%,rgba(0,0,0,0))); 
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(76,76,76,1) 51%,rgba(76,76,76,0) 52%,rgba(0,0,0,0.1) 53%,rgba(0,0,0,0) 58%); 
    background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(76,76,76,1) 51%,rgba(76,76,76,0) 52%,rgba(0,0,0,0.1) 53%,rgba(0,0,0,0) 58%); 
    background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(76,76,76,1) 51%,rgba(76,76,76,0) 52%,rgba(0,0,0,0.1) 53%,rgba(0,0,0,0) 58%); 
    background: radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(76,76,76,1) 51%,rgba(76,76,76,0) 52%,rgba(0,0,0,0.1) 53%,rgba(0,0,0,0) 58%); 
} 
@keyframes spin 
{ 
from { 
    -moz-transform:rotate(0deg); 
    -webkit-transform:rotate(0deg); 
    -o-transform:rotate(0deg); 
    -ms-transform:rotate(0deg); 
    transform:rotate(0deg); 
} 
to { 
    -moz-transform:rotate(360deg); 
    -webkit-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
    -ms-transform:rotate(360deg); 
    transform:rotate(360deg); 
} 
} 
 
@-moz-keyframes spin 
{ 
from { 
    -moz-transform:rotate(0deg); 
    transform:rotate(0deg); 
} 
to { 
    -moz-transform:rotate(360deg); 
    transform:rotate(360deg); 
} 
} 
 
@-webkit-keyframes spin 
{ 
from { 
    -webkit-transform:rotate(0deg); 
    transform:rotate(0deg); 
} 
to { 
    -webkit-transform:rotate(360deg); 
    transform:rotate(360deg); 
} 
} </blockquote>
</div>
 
Step 5. Click on the Save template button to save the changes. For applying the animated vinyl record effect on your image, first upload the picture for your album cover, copy the URL of it and then paste it inside a Notepad so that you can use it later. If you don't know how to upload images and get their urls, please read this tutorial: <a href="http://buzzblogger.blogspot.com/2013/09/upload-images-and-get-url-of-image.html" rel="nofollow" style="color: blue;" target="_blank">How to upload images and get the URLs</a> 
 
Step 6. When you create a post, add this code inside the HTML section: 
<blockquote class="tr_bq">
<div class="case"> 
 <div class="overlay"></div> 
 <img class="cover" src="http://add-image-url-here.com/"/> 
TEXT HERE 
   <div class="slotwrapper"> 
  <div class="slot"></div> 
 </div> 
 <div class="vinyl"></div> 
</div></blockquote>
Replace the URL in blue with the one that you saved earlier and the text in red with the info to show on mouse over. In case you don't need any info, remove this part: 
<blockquote class="tr_bq">
TEXT HERE</blockquote>
Step 7. Publish your post and you're done! Enjoy! 
<style>.info { position: absolute; z-index: 3; top: 20%; zoom: 1; filter: alpha(opacity=0); opacity: 0; padding: 10px; text-align: center; color: #eee; font-size: 13px; font-weight: bold; background: #333; background: rgba(0,0,0,.7); -moz-transition:all linear 0.5s 0s; -webkit-transition:all linear 0.5s 0s; transition:all ease 0.5s 0s; } .case:hover .info, .case:hover .vinyl { filter: alpha(opacity=100); opacity:1; } .case { position:relative; display:block; width:185px; height:185px; -webkit-border-radius:3px; border-radius:3px; z-index:2; -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2); margin:0 auto; } .case:after { position:absolute; display:block; content: ""; width:265px; height:10px; left:-40px; bottom:-8px; z-index:1; background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 50%, rgba(225,225,225,0) 51%, rgba(246,246,246,0) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.45)), color-stop(50%,rgba(0,0,0,0)), color-stop(51%,rgba(225,225,225,0)), color-stop(100%,rgba(246,246,246,0))); background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); } .case .cover{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; -webkit-border-radius:3px; border-radius:3px; -webkit-box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.6); box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.6); } .case .overlay{ position:absolute; display:block; top:0; left:0; z-index:3; width:100%; height:100%; -webkit-box-shadow: inset 1px 1px 4px 0px rgba(255, 255, 255, 0.45),inset 1px 1px 2px 0px rgba(255,255, 255, 0.5),inset -1px -1px 2px 0px rgba(255,255, 255, 0.5); box-shadow: inset 1px 1px 4px 0px rgba(255,255, 255, 0.45),inset 1px 1px 2px 0px rgba(255,255, 255, 0.5),inset -1px -1px 2px 0px rgba(255,255, 255, 0.5); -webkit-border-radius:3px; border-radius:3px; border:1px solid rgba(0, 0, 0, 0.35); } .case .overlay:before{ position:absolute; display:block; content: ""; top:0; left:0; z-index:4; width:100%; height:100%; background: -moz-linear-gradient(-55deg, rgba(255,255,255,0.1) 0%, rgba(244,244,244,0.35) 50%, rgba(225,225,225,0) 51%, rgba(246,246,246,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0.1)), color-stop(50%,rgba(244,244,244,0.35)), color-stop(51%,rgba(225,225,225,0)), color-stop(100%,rgba(246,246,246,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.1) 0%,rgba(244,244,244,0.35) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(255,255,255,0.1) 0%,rgba(244,244,244,0.35) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(255,255,255,0.1) 0%,rgba(244,244,244,0.35) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); /* IE10+ */ background: linear-gradient(-55deg, rgba(255,255,255,0.1) 0%,rgba(244,244,244,0.35) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); /* W3C */ -webkit-border-radius:3px; border-radius:3px; } .vinyl { position:absolute; z-index:1; bottom:4px; left:5px; display:block; width:175px; height:175px; border-radius:200px; background: -moz-linear-gradient(top, rgba(45,45,45,1) 0%, rgba(0,0,0,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(45,45,45,1)), color-stop(100%,rgba(0,0,0,1))); background: -webkit-linear-gradient(top, rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%); background: -o-linear-gradient(top, rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%); background: -ms-linear-gradient(top, rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%); background: linear-gradient(top, rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%); -webkit-box-shadow: inset 0px 1px 3px 0px rgba(255, 255, 255, 1); box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.35), inset 0px -1px 1px 0px rgba(255, 255, 255, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.4); border:1px solid #595959; transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; } .case:hover .vinyl { animation: spin 600ms ease-in-out; -moz-animation: spin 600ms ease-in-out; -webkit-animation: spin 600ms ease-in-out; left:98px; } .vinyl:before { position:absolute; display:block; content: ""; width:100%; height:100%; border-radius:100%; background: -moz-radial-gradient(center, ellipse cover, rgba(38,38,38,0.4) 0%, rgba(89,89,89,0.4) 1%, rgba(35,35,35,0.4) 2%, rgba(86,86,86,0.4) 3%, rgba(35,35,35,0.4) 4%, rgba(86,86,86,0.4) 5%, rgba(35,35,35,0.4) 6%, rgba(86,86,86,0.4) 7%, rgba(35,35,35,0.4) 8%, rgba(86,86,86,0.4) 9%, rgba(35,35,35,0.4) 10%, rgba(86,86,86,0.4) 11%, rgba(35,35,35,0.4) 12%, rgba(86,86,86,0.4) 13%, rgba(35,35,35,0.4) 14%, rgba(86,86,86,0.4) 15%, rgba(35,35,35,0.4) 16%, rgba(86,86,86,0.4) 17%, rgba(35,35,35,0.4) 18%, rgba(86,86,86,0.4) 19%, rgba(35,35,35,0.4) 20%, rgba(86,86,86,0.4) 21%, rgba(35,35,35,0.4) 22%, rgba(86,86,86,0.4) 23%, rgba(35,35,35,0.4) 24%, rgba(86,86,86,0.4) 25%, rgba(35,35,35,0.4) 26%, rgba(86,86,86,0.4) 27%, rgba(35,35,35,0.4) 28%, rgba(86,86,86,0.4) 29%, rgba(35,35,35,0.4) 30%, rgba(86,86,86,0.4) 31%, rgba(35,35,35,0.4) 32%, rgba(86,86,86,0.4) 33%, rgba(35,35,35,0.4) 34%, rgba(86,86,86,0.4) 35%, rgba(35,35,35,0.4) 36%, rgba(86,86,86,0.4) 37%, rgba(35,35,35,0.4) 38%, rgba(86,86,86,0.4) 39%, rgba(35,35,35,0.4) 40%, rgba(86,86,86,0.4) 41%, rgba(35,35,35,0.4) 42%, rgba(86,86,86,0.4) 43%, rgba(35,35,35,0.4) 44%, rgba(86,86,86,0.4) 45%, rgba(35,35,35,0.4) 46%, rgba(86,86,86,0.4) 47%, rgba(35,35,35,0.4) 48%, rgba(86,86,86,0.4) 49%, rgba(35,35,35,0.4) 50%, rgba(86,86,86,0.4) 51%, rgba(35,35,35,0.4) 52%, rgba(86,86,86,0.4) 53%, rgba(35,35,35,0.4) 54%, rgba(86,86,86,0.4) 55%, rgba(35,35,35,0.4) 56%, rgba(86,86,86,0.4) 57%, rgba(35,35,35,0.4) 58%, rgba(86,86,86,0.4) 59%, rgba(35,35,35,0.4) 60%, rgba(86,86,86,0.4) 61%, rgba(35,35,35,0.4) 62%, rgba(86,86,86,0.4) 63%, rgba(35,35,35,0.4) 64%, rgba(86,86,86,0.4) 65%, rgba(35,35,35,0.4) 66%, rgba(86,86,86,0.4) 67%, rgba(35,35,35,0.4) 68%, rgba(86,86,86,0.4) 69%, rgba(35,35,35,0.4) 70%, rgba(86,86,86,0.4) 71%, rgba(35,35,35,0.4) 72%, rgba(86,86,86,0.4) 73%, rgba(35,35,35,0.4) 74%, rgba(86,86,86,0.4) 75%, rgba(35,35,35,0.4) 76%, rgba(86,86,86,0.4) 77%, rgba(35,35,35,0.4) 78%, rgba(86,86,86,0.4) 79%, rgba(35,35,35,0.4) 80%, rgba(86,86,86,0.4) 81%, rgba(35,35,35,0.4) 82%, rgba(86,86,86,0.4) 83%, rgba(35,35,35,0.4) 84%, rgba(86,86,86,0.4) 85%, rgba(35,35,35,0.4) 86%, rgba(86,86,86,0.4) 87%, rgba(35,35,35,0.4) 88%, rgba(86,86,86,0.4) 89%, rgba(35,35,35,0.4) 90%, rgba(86,86,86,0.4) 91%, rgba(35,35,35,0.4) 92%, rgba(86,86,86,0.4) 93%, rgba(35,35,35,0.4) 94%, rgba(86,86,86,0.4) 95%, rgba(35,35,35,0.4) 96%, rgba(86,86,86,0.4) 97%, rgba(86,86,86,0.4) 97%, rgba(35,35,35,0.4) 98%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(38,38,38,0.4)), color-stop(1%,rgba(89,89,89,0.4)), color-stop(2%,rgba(35,35,35,0.4)), color-stop(3%,rgba(86,86,86,0.4)), color-stop(4%,rgba(35,35,35,0.4)), color-stop(5%,rgba(86,86,86,0.4)), color-stop(6%,rgba(35,35,35,0.4)), color-stop(7%,rgba(86,86,86,0.4)), color-stop(8%,rgba(35,35,35,0.4)), color-stop(9%,rgba(86,86,86,0.4)), color-stop(10%,rgba(35,35,35,0.4)), color-stop(11%,rgba(86,86,86,0.4)), color-stop(12%,rgba(35,35,35,0.4)), color-stop(13%,rgba(86,86,86,0.4)), color-stop(14%,rgba(35,35,35,0.4)), color-stop(15%,rgba(86,86,86,0.4)), color-stop(16%,rgba(35,35,35,0.4)), color-stop(17%,rgba(86,86,86,0.4)), color-stop(18%,rgba(35,35,35,0.4)), color-stop(19%,rgba(86,86,86,0.4)), color-stop(20%,rgba(35,35,35,0.4)), color-stop(21%,rgba(86,86,86,0.4)), color-stop(22%,rgba(35,35,35,0.4)), color-stop(23%,rgba(86,86,86,0.4)), color-stop(24%,rgba(35,35,35,0.4)), color-stop(25%,rgba(86,86,86,0.4)), color-stop(26%,rgba(35,35,35,0.4)), color-stop(27%,rgba(86,86,86,0.4)), color-stop(28%,rgba(35,35,35,0.4)), color-stop(29%,rgba(86,86,86,0.4)), color-stop(30%,rgba(35,35,35,0.4)), color-stop(31%,rgba(86,86,86,0.4)), color-stop(32%,rgba(35,35,35,0.4)), color-stop(33%,rgba(86,86,86,0.4)), color-stop(34%,rgba(35,35,35,0.4)), color-stop(35%,rgba(86,86,86,0.4)), color-stop(36%,rgba(35,35,35,0.4)), color-stop(37%,rgba(86,86,86,0.4)), color-stop(38%,rgba(35,35,35,0.4)), color-stop(39%,rgba(86,86,86,0.4)), color-stop(40%,rgba(35,35,35,0.4)), color-stop(41%,rgba(86,86,86,0.4)), color-stop(42%,rgba(35,35,35,0.4)), color-stop(43%,rgba(86,86,86,0.4)), color-stop(44%,rgba(35,35,35,0.4)), color-stop(45%,rgba(86,86,86,0.4)), color-stop(46%,rgba(35,35,35,0.4)), color-stop(47%,rgba(86,86,86,0.4)), color-stop(48%,rgba(35,35,35,0.4)), color-stop(49%,rgba(86,86,86,0.4)), color-stop(50%,rgba(35,35,35,0.4)), color-stop(51%,rgba(86,86,86,0.4)), color-stop(52%,rgba(35,35,35,0.4)), color-stop(53%,rgba(86,86,86,0.4)), color-stop(54%,rgba(35,35,35,0.4)), color-stop(55%,rgba(86,86,86,0.4)), color-stop(56%,rgba(35,35,35,0.4)), color-stop(57%,rgba(86,86,86,0.4)), color-stop(58%,rgba(35,35,35,0.4)), color-stop(59%,rgba(86,86,86,0.4)), color-stop(60%,rgba(35,35,35,0.4)), color-stop(61%,rgba(86,86,86,0.4)), color-stop(62%,rgba(35,35,35,0.4)), color-stop(63%,rgba(86,86,86,0.4)), color-stop(64%,rgba(35,35,35,0.4)), color-stop(65%,rgba(86,86,86,0.4)), color-stop(66%,rgba(35,35,35,0.4)), color-stop(67%,rgba(86,86,86,0.4)), color-stop(68%,rgba(35,35,35,0.4)), color-stop(69%,rgba(86,86,86,0.4)), color-stop(70%,rgba(35,35,35,0.4)), color-stop(71%,rgba(86,86,86,0.4)), color-stop(72%,rgba(35,35,35,0.4)), color-stop(73%,rgba(86,86,86,0.4)), color-stop(74%,rgba(35,35,35,0.4)), color-stop(75%,rgba(86,86,86,0.4)), color-stop(76%,rgba(35,35,35,0.4)), color-stop(77%,rgba(86,86,86,0.4)), color-stop(78%,rgba(35,35,35,0.4)), color-stop(79%,rgba(86,86,86,0.4)), color-stop(80%,rgba(35,35,35,0.4)), color-stop(81%,rgba(86,86,86,0.4)), color-stop(82%,rgba(35,35,35,0.4)), color-stop(83%,rgba(86,86,86,0.4)), color-stop(84%,rgba(35,35,35,0.4)), color-stop(85%,rgba(86,86,86,0.4)), color-stop(86%,rgba(35,35,35,0.4)), color-stop(87%,rgba(86,86,86,0.4)), color-stop(88%,rgba(35,35,35,0.4)), color-stop(89%,rgba(86,86,86,0.4)), color-stop(90%,rgba(35,35,35,0.4)), color-stop(91%,rgba(86,86,86,0.4)), color-stop(92%,rgba(35,35,35,0.4)), color-stop(93%,rgba(86,86,86,0.4)), color-stop(94%,rgba(35,35,35,0.4)), color-stop(95%,rgba(86,86,86,0.4)), color-stop(96%,rgba(35,35,35,0.4)), color-stop(97%,rgba(86,86,86,0.4)), color-stop(97%,rgba(86,86,86,0.4)), color-stop(98%,rgba(35,35,35,0.4))); background: -webkit-radial-gradient(center, ellipse cover, rgba(38,38,38,0.4) 0%,rgba(89,89,89,0.4) 1%,rgba(35,35,35,0.4) 2%,rgba(86,86,86,0.4) 3%,rgba(35,35,35,0.4) 4%,rgba(86,86,86,0.4) 5%,rgba(35,35,35,0.4) 6%,rgba(86,86,86,0.4) 7%,rgba(35,35,35,0.4) 8%,rgba(86,86,86,0.4) 9%,rgba(35,35,35,0.4) 10%,rgba(86,86,86,0.4) 11%,rgba(35,35,35,0.4) 12%,rgba(86,86,86,0.4) 13%,rgba(35,35,35,0.4) 14%,rgba(86,86,86,0.4) 15%,rgba(35,35,35,0.4) 16%,rgba(86,86,86,0.4) 17%,rgba(35,35,35,0.4) 18%,rgba(86,86,86,0.4) 19%,rgba(35,35,35,0.4) 20%,rgba(86,86,86,0.4) 21%,rgba(35,35,35,0.4) 22%,rgba(86,86,86,0.4) 23%,rgba(35,35,35,0.4) 24%,rgba(86,86,86,0.4) 25%,rgba(35,35,35,0.4) 26%,rgba(86,86,86,0.4) 27%,rgba(35,35,35,0.4) 28%,rgba(86,86,86,0.4) 29%,rgba(35,35,35,0.4) 30%,rgba(86,86,86,0.4) 31%,rgba(35,35,35,0.4) 32%,rgba(86,86,86,0.4) 33%,rgba(35,35,35,0.4) 34%,rgba(86,86,86,0.4) 35%,rgba(35,35,35,0.4) 36%,rgba(86,86,86,0.4) 37%,rgba(35,35,35,0.4) 38%,rgba(86,86,86,0.4) 39%,rgba(35,35,35,0.4) 40%,rgba(86,86,86,0.4) 41%,rgba(35,35,35,0.4) 42%,rgba(86,86,86,0.4) 43%,rgba(35,35,35,0.4) 44%,rgba(86,86,86,0.4) 45%,rgba(35,35,35,0.4) 46%,rgba(86,86,86,0.4) 47%,rgba(35,35,35,0.4) 48%,rgba(86,86,86,0.4) 49%,rgba(35,35,35,0.4) 50%,rgba(86,86,86,0.4) 51%,rgba(35,35,35,0.4) 52%,rgba(86,86,86,0.4) 53%,rgba(35,35,35,0.4) 54%,rgba(86,86,86,0.4) 55%,rgba(35,35,35,0.4) 56%,rgba(86,86,86,0.4) 57%,rgba(35,35,35,0.4) 58%,rgba(86,86,86,0.4) 59%,rgba(35,35,35,0.4) 60%,rgba(86,86,86,0.4) 61%,rgba(35,35,35,0.4) 62%,rgba(86,86,86,0.4) 63%,rgba(35,35,35,0.4) 64%,rgba(86,86,86,0.4) 65%,rgba(35,35,35,0.4) 66%,rgba(86,86,86,0.4) 67%,rgba(35,35,35,0.4) 68%,rgba(86,86,86,0.4) 69%,rgba(35,35,35,0.4) 70%,rgba(86,86,86,0.4) 71%,rgba(35,35,35,0.4) 72%,rgba(86,86,86,0.4) 73%,rgba(35,35,35,0.4) 74%,rgba(86,86,86,0.4) 75%,rgba(35,35,35,0.4) 76%,rgba(86,86,86,0.4) 77%,rgba(35,35,35,0.4) 78%,rgba(86,86,86,0.4) 79%,rgba(35,35,35,0.4) 80%,rgba(86,86,86,0.4) 81%,rgba(35,35,35,0.4) 82%,rgba(86,86,86,0.4) 83%,rgba(35,35,35,0.4) 84%,rgba(86,86,86,0.4) 85%,rgba(35,35,35,0.4) 86%,rgba(86,86,86,0.4) 87%,rgba(35,35,35,0.4) 88%,rgba(86,86,86,0.4) 89%,rgba(35,35,35,0.4) 90%,rgba(86,86,86,0.4) 91%,rgba(35,35,35,0.4) 92%,rgba(86,86,86,0.4) 93%,rgba(35,35,35,0.4) 94%,rgba(86,86,86,0.4) 95%,rgba(35,35,35,0.4) 96%,rgba(86,86,86,0.4) 97%,rgba(86,86,86,0.4) 97%,rgba(35,35,35,0.4) 98%); background: -o-radial-gradient(center, ellipse cover, rgba(38,38,38,0.4) 0%,rgba(89,89,89,0.4) 1%,rgba(35,35,35,0.4) 2%,rgba(86,86,86,0.4) 3%,rgba(35,35,35,0.4) 4%,rgba(86,86,86,0.4) 5%,rgba(35,35,35,0.4) 6%,rgba(86,86,86,0.4) 7%,rgba(35,35,35,0.4) 8%,rgba(86,86,86,0.4) 9%,rgba(35,35,35,0.4) 10%,rgba(86,86,86,0.4) 11%,rgba(35,35,35,0.4) 12%,rgba(86,86,86,0.4) 13%,rgba(35,35,35,0.4) 14%,rgba(86,86,86,0.4) 15%,rgba(35,35,35,0.4) 16%,rgba(86,86,86,0.4) 17%,rgba(35,35,35,0.4) 18%,rgba(86,86,86,0.4) 19%,rgba(35,35,35,0.4) 20%,rgba(86,86,86,0.4) 21%,rgba(35,35,35,0.4) 22%,rgba(86,86,86,0.4) 23%,rgba(35,35,35,0.4) 24%,rgba(86,86,86,0.4) 25%,rgba(35,35,35,0.4) 26%,rgba(86,86,86,0.4) 27%,rgba(35,35,35,0.4) 28%,rgba(86,86,86,0.4) 29%,rgba(35,35,35,0.4) 30%,rgba(86,86,86,0.4) 31%,rgba(35,35,35,0.4) 32%,rgba(86,86,86,0.4) 33%,rgba(35,35,35,0.4) 34%,rgba(86,86,86,0.4) 35%,rgba(35,35,35,0.4) 36%,rgba(86,86,86,0.4) 37%,rgba(35,35,35,0.4) 38%,rgba(86,86,86,0.4) 39%,rgba(35,35,35,0.4) 40%,rgba(86,86,86,0.4) 41%,rgba(35,35,35,0.4) 42%,rgba(86,86,86,0.4) 43%,rgba(35,35,35,0.4) 44%,rgba(86,86,86,0.4) 45%,rgba(35,35,35,0.4) 46%,rgba(86,86,86,0.4) 47%,rgba(35,35,35,0.4) 48%,rgba(86,86,86,0.4) 49%,rgba(35,35,35,0.4) 50%,rgba(86,86,86,0.4) 51%,rgba(35,35,35,0.4) 52%,rgba(86,86,86,0.4) 53%,rgba(35,35,35,0.4) 54%,rgba(86,86,86,0.4) 55%,rgba(35,35,35,0.4) 56%,rgba(86,86,86,0.4) 57%,rgba(35,35,35,0.4) 58%,rgba(86,86,86,0.4) 59%,rgba(35,35,35,0.4) 60%,rgba(86,86,86,0.4) 61%,rgba(35,35,35,0.4) 62%,rgba(86,86,86,0.4) 63%,rgba(35,35,35,0.4) 64%,rgba(86,86,86,0.4) 65%,rgba(35,35,35,0.4) 66%,rgba(86,86,86,0.4) 67%,rgba(35,35,35,0.4) 68%,rgba(86,86,86,0.4) 69%,rgba(35,35,35,0.4) 70%,rgba(86,86,86,0.4) 71%,rgba(35,35,35,0.4) 72%,rgba(86,86,86,0.4) 73%,rgba(35,35,35,0.4) 74%,rgba(86,86,86,0.4) 75%,rgba(35,35,35,0.4) 76%,rgba(86,86,86,0.4) 77%,rgba(35,35,35,0.4) 78%,rgba(86,86,86,0.4) 79%,rgba(35,35,35,0.4) 80%,rgba(86,86,86,0.4) 81%,rgba(35,35,35,0.4) 82%,rgba(86,86,86,0.4) 83%,rgba(35,35,35,0.4) 84%,rgba(86,86,86,0.4) 85%,rgba(35,35,35,0.4) 86%,rgba(86,86,86,0.4) 87%,rgba(35,35,35,0.4) 88%,rgba(86,86,86,0.4) 89%,rgba(35,35,35,0.4) 90%,rgba(86,86,86,0.4) 91%,rgba(35,35,35,0.4) 92%,rgba(86,86,86,0.4) 93%,rgba(35,35,35,0.4) 94%,rgba(86,86,86,0.4) 95%,rgba(35,35,35,0.4) 96%,rgba(86,86,86,0.4) 97%,rgba(86,86,86,0.4) 97%,rgba(35,35,35,0.4) 98%); background: -ms-radial-gradient(center, ellipse cover, rgba(38,38,38,0.4) 0%,rgba(89,89,89,0.4) 1%,rgba(35,35,35,0.4) 2%,rgba(86,86,86,0.4) 3%,rgba(35,35,35,0.4) 4%,rgba(86,86,86,0.4) 5%,rgba(35,35,35,0.4) 6%,rgba(86,86,86,0.4) 7%,rgba(35,35,35,0.4) 8%,rgba(86,86,86,0.4) 9%,rgba(35,35,35,0.4) 10%,rgba(86,86,86,0.4) 11%,rgba(35,35,35,0.4) 12%,rgba(86,86,86,0.4) 13%,rgba(35,35,35,0.4) 14%,rgba(86,86,86,0.4) 15%,rgba(35,35,35,0.4) 16%,rgba(86,86,86,0.4) 17%,rgba(35,35,35,0.4) 18%,rgba(86,86,86,0.4) 19%,rgba(35,35,35,0.4) 20%,rgba(86,86,86,0.4) 21%,rgba(35,35,35,0.4) 22%,rgba(86,86,86,0.4) 23%,rgba(35,35,35,0.4) 24%,rgba(86,86,86,0.4) 25%,rgba(35,35,35,0.4) 26%,rgba(86,86,86,0.4) 27%,rgba(35,35,35,0.4) 28%,rgba(86,86,86,0.4) 29%,rgba(35,35,35,0.4) 30%,rgba(86,86,86,0.4) 31%,rgba(35,35,35,0.4) 32%,rgba(86,86,86,0.4) 33%,rgba(35,35,35,0.4) 34%,rgba(86,86,86,0.4) 35%,rgba(35,35,35,0.4) 36%,rgba(86,86,86,0.4) 37%,rgba(35,35,35,0.4) 38%,rgba(86,86,86,0.4) 39%,rgba(35,35,35,0.4) 40%,rgba(86,86,86,0.4) 41%,rgba(35,35,35,0.4) 42%,rgba(86,86,86,0.4) 43%,rgba(35,35,35,0.4) 44%,rgba(86,86,86,0.4) 45%,rgba(35,35,35,0.4) 46%,rgba(86,86,86,0.4) 47%,rgba(35,35,35,0.4) 48%,rgba(86,86,86,0.4) 49%,rgba(35,35,35,0.4) 50%,rgba(86,86,86,0.4) 51%,rgba(35,35,35,0.4) 52%,rgba(86,86,86,0.4) 53%,rgba(35,35,35,0.4) 54%,rgba(86,86,86,0.4) 55%,rgba(35,35,35,0.4) 56%,rgba(86,86,86,0.4) 57%,rgba(35,35,35,0.4) 58%,rgba(86,86,86,0.4) 59%,rgba(35,35,35,0.4) 60%,rgba(86,86,86,0.4) 61%,rgba(35,35,35,0.4) 62%,rgba(86,86,86,0.4) 63%,rgba(35,35,35,0.4) 64%,rgba(86,86,86,0.4) 65%,rgba(35,35,35,0.4) 66%,rgba(86,86,86,0.4) 67%,rgba(35,35,35,0.4) 68%,rgba(86,86,86,0.4) 69%,rgba(35,35,35,0.4) 70%,rgba(86,86,86,0.4) 71%,rgba(35,35,35,0.4) 72%,rgba(86,86,86,0.4) 73%,rgba(35,35,35,0.4) 74%,rgba(86,86,86,0.4) 75%,rgba(35,35,35,0.4) 76%,rgba(86,86,86,0.4) 77%,rgba(35,35,35,0.4) 78%,rgba(86,86,86,0.4) 79%,rgba(35,35,35,0.4) 80%,rgba(86,86,86,0.4) 81%,rgba(35,35,35,0.4) 82%,rgba(86,86,86,0.4) 83%,rgba(35,35,35,0.4) 84%,rgba(86,86,86,0.4) 85%,rgba(35,35,35,0.4) 86%,rgba(86,86,86,0.4) 87%,rgba(35,35,35,0.4) 88%,rgba(86,86,86,0.4) 89%,rgba(35,35,35,0.4) 90%,rgba(86,86,86,0.4) 91%,rgba(35,35,35,0.4) 92%,rgba(86,86,86,0.4) 93%,rgba(35,35,35,0.4) 94%,rgba(86,86,86,0.4) 95%,rgba(35,35,35,0.4) 96%,rgba(86,86,86,0.4) 97%,rgba(86,86,86,0.4) 97%,rgba(35,35,35,0.4) 98%); background: radial-gradient(center, ellipse cover, rgba(38,38,38,0.4) 0%,rgba(89,89,89,0.4) 1%,rgba(35,35,35,0.4) 2%,rgba(86,86,86,0.4) 3%,rgba(35,35,35,0.4) 4%,rgba(86,86,86,0.4) 5%,rgba(35,35,35,0.4) 6%,rgba(86,86,86,0.4) 7%,rgba(35,35,35,0.4) 8%,rgba(86,86,86,0.4) 9%,rgba(35,35,35,0.4) 10%,rgba(86,86,86,0.4) 11%,rgba(35,35,35,0.4) 12%,rgba(86,86,86,0.4) 13%,rgba(35,35,35,0.4) 14%,rgba(86,86,86,0.4) 15%,rgba(35,35,35,0.4) 16%,rgba(86,86,86,0.4) 17%,rgba(35,35,35,0.4) 18%,rgba(86,86,86,0.4) 19%,rgba(35,35,35,0.4) 20%,rgba(86,86,86,0.4) 21%,rgba(35,35,35,0.4) 22%,rgba(86,86,86,0.4) 23%,rgba(35,35,35,0.4) 24%,rgba(86,86,86,0.4) 25%,rgba(35,35,35,0.4) 26%,rgba(86,86,86,0.4) 27%,rgba(35,35,35,0.4) 28%,rgba(86,86,86,0.4) 29%,rgba(35,35,35,0.4) 30%,rgba(86,86,86,0.4) 31%,rgba(35,35,35,0.4) 32%,rgba(86,86,86,0.4) 33%,rgba(35,35,35,0.4) 34%,rgba(86,86,86,0.4) 35%,rgba(35,35,35,0.4) 36%,rgba(86,86,86,0.4) 37%,rgba(35,35,35,0.4) 38%,rgba(86,86,86,0.4) 39%,rgba(35,35,35,0.4) 40%,rgba(86,86,86,0.4) 41%,rgba(35,35,35,0.4) 42%,rgba(86,86,86,0.4) 43%,rgba(35,35,35,0.4) 44%,rgba(86,86,86,0.4) 45%,rgba(35,35,35,0.4) 46%,rgba(86,86,86,0.4) 47%,rgba(35,35,35,0.4) 48%,rgba(86,86,86,0.4) 49%,rgba(35,35,35,0.4) 50%,rgba(86,86,86,0.4) 51%,rgba(35,35,35,0.4) 52%,rgba(86,86,86,0.4) 53%,rgba(35,35,35,0.4) 54%,rgba(86,86,86,0.4) 55%,rgba(35,35,35,0.4) 56%,rgba(86,86,86,0.4) 57%,rgba(35,35,35,0.4) 58%,rgba(86,86,86,0.4) 59%,rgba(35,35,35,0.4) 60%,rgba(86,86,86,0.4) 61%,rgba(35,35,35,0.4) 62%,rgba(86,86,86,0.4) 63%,rgba(35,35,35,0.4) 64%,rgba(86,86,86,0.4) 65%,rgba(35,35,35,0.4) 66%,rgba(86,86,86,0.4) 67%,rgba(35,35,35,0.4) 68%,rgba(86,86,86,0.4) 69%,rgba(35,35,35,0.4) 70%,rgba(86,86,86,0.4) 71%,rgba(35,35,35,0.4) 72%,rgba(86,86,86,0.4) 73%,rgba(35,35,35,0.4) 74%,rgba(86,86,86,0.4) 75%,rgba(35,35,35,0.4) 76%,rgba(86,86,86,0.4) 77%,rgba(35,35,35,0.4) 78%,rgba(86,86,86,0.4) 79%,rgba(35,35,35,0.4) 80%,rgba(86,86,86,0.4) 81%,rgba(35,35,35,0.4) 82%,rgba(86,86,86,0.4) 83%,rgba(35,35,35,0.4) 84%,rgba(86,86,86,0.4) 85%,rgba(35,35,35,0.4) 86%,rgba(86,86,86,0.4) 87%,rgba(35,35,35,0.4) 88%,rgba(86,86,86,0.4) 89%,rgba(35,35,35,0.4) 90%,rgba(86,86,86,0.4) 91%,rgba(35,35,35,0.4) 92%,rgba(86,86,86,0.4) 93%,rgba(35,35,35,0.4) 94%,rgba(86,86,86,0.4) 95%,rgba(35,35,35,0.4) 96%,rgba(86,86,86,0.4) 97%,rgba(86,86,86,0.4) 97%,rgba(35,35,35,0.4) 98%); top:0; left:0; } .vinyl:after { position:absolute; display:block; content: "\002022"; width:34px; height:53px; line-height:53px; border-radius:53px; top:60px; left:60px; padding-left:19px; color:#000; background: -moz-linear-gradient(-45deg, rgba(252,252,252,1) 0%, rgba(239,239,239,1) 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(239,239,239,1))); background: -webkit-linear-gradient(-45deg, rgba(252,252,252,1) 0%,rgba(239,239,239,1) 100%); background: -o-linear-gradient(-45deg, rgba(252,252,252,1) 0%,rgba(239,239,239,1) 100%); background: -ms-linear-gradient(-45deg, rgba(252,252,252,1) 0%,rgba(239,239,239,1) 100%); background: linear-gradient(-45deg, rgba(252,252,252,1) 0%,rgba(239,239,239,1) 100%); border:1px solid #000; font-size:40px; text-shadow: 0px 0px 3px rgba(0,0,0, 0.8); } .slotwrapper { position:absolute; display:block; top:0px; right:-10px; height:100%; width:10px; overflow:hidden; } .slot{ position:absolute; display:block; top:-160px; left:-67px; height:505px; width:85px; background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(76,76,76,1) 51%, rgba(76,76,76,0) 52%, rgba(0,0,0,0.1) 53%, rgba(0,0,0,0) 58%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(255,255,255,1)), color-stop(51%,rgba(76,76,76,1)), color-stop(52%,rgba(76,76,76,0)), color-stop(53%,rgba(0,0,0,0.1)), color-stop(58%,rgba(0,0,0,0))); background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(76,76,76,1) 51%,rgba(76,76,76,0) 52%,rgba(0,0,0,0.1) 53%,rgba(0,0,0,0) 58%); background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(76,76,76,1) 51%,rgba(76,76,76,0) 52%,rgba(0,0,0,0.1) 53%,rgba(0,0,0,0) 58%); background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(76,76,76,1) 51%,rgba(76,76,76,0) 52%,rgba(0,0,0,0.1) 53%,rgba(0,0,0,0) 58%); background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(76,76,76,1) 51%,rgba(76,76,76,0) 52%,rgba(0,0,0,0.1) 53%,rgba(0,0,0,0) 58%); } @keyframes spin { from { -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); } to { -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); } } @-moz-keyframes spin { from { -moz-transform:rotate(0deg); transform:rotate(0deg); } to { -moz-transform:rotate(360deg); transform:rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform:rotate(0deg); transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); transform:rotate(360deg); } } </style></div>

Blog Design css Image Effects Create a CSS3 Image Hover Effect with Animated Vinyl Record

Here is an amazing CSS image effect to reveal more information on your images with a really cool CSS3 hover animation. This is just perfect...

Before/After Photo Effect with jQuery

<div dir="ltr" style="text-align: left;" trbidi="on">
If you have a design or makeup blog, or if you are using before and after image comparison, this script will surely be very useful for you. 
<div class="ssmainhide" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZVZkgNscYNwsIcctKpmKd7_bA3iRfaQt6DtoU4IhJU-guBVqVOSjAMhCxM1C-_KD8XTpjpRxhDmYtoBdgNbzyssmVT51tckKOCimJzE4nvp_GCUJWKjhm6V49HgtJOXxidYVfk-FpOCgr/s1600/jquery-before-after.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZVZkgNscYNwsIcctKpmKd7_bA3iRfaQt6DtoU4IhJU-guBVqVOSjAMhCxM1C-_KD8XTpjpRxhDmYtoBdgNbzyssmVT51tckKOCimJzE4nvp_GCUJWKjhm6V49HgtJOXxidYVfk-FpOCgr/s320/jquery-before-after.jpg" width="303" /></a></div>
 
In this tutorial we'll learn how to add the Before/After plugin, a script that works with jQuery and displays two pictures dynamically for comparing them at the same time. By dragging sideways a small bar we can see both images that are being compared. 
 
See this Brittany Murphy pic before and after photoshop: 
 
<div id="beforeAfter1">
<div>
<img alt="before" height="449" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0qaYK8kEsOwfPoY7SN3gd9zVq7HjM6rkT7iI2dphVBFVerdiFwkj-p4V1T4AZiHaploqGwWogg-TZSHqiCaevNFSnFWpO6D5Cs67kL8RGJ_jEBGTDFljald3YfmPGZlPL3ylaSKzgEN2E/s1600/Before-and-after2.jpg" width="383" /></div>
<div>
<img alt="after" height="449" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPAKPNPtyAhXAeKAQSw67ek0DiCy7Mr9cB63Y_8yc3fEIjoPQHZ9JKYJpy0BlByNoPjKy4QulB1Zps6I3lpF6FzYaMqw-hpXZuE1yMm4FfNxoir9GrHMYXYl_YQDaaleRSk17CmQJN8Qqj/s1600/Before-and-after.jpg" width="383" /></div>
</div>
 
Implementing this script is simple, we just need jQuery, the Before/After script, and the two images that we are going to compare. 
 
<h2>
How to add the Before/After plugin to Blogger</h2>
 
Step 1. Go to Template > Edit HTML and before </head> (CTRL + F to find it) paste the following: 
<blockquote class="tr_bq">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> 
<script src='http://http://code.jquery.com/ui/1.10.3/jquery-ui.js' type='text/javascript'/> 
<script src='http://helplogger.googlecode.com/svn/trunk/jquery.beforeafter.min.js' type='text/javascript'/> 
<script type='text/javascript'> 
$(function(){ 
$(&#39;#beforeafter1&#39;).beforeAfter({showFullLinks : true}); 
}); 
</script></blockquote>
Step 2. Click on the Save template button 
Note: if the above script doesn't work for you, add it above the </body> tag. Also please verify if you have added jQuery in your template (if you did so, then remove the line in green) 
 
Step 3. Go to Layout, add a HTML/Javascript gadget and paste this code inside the empty box: 
<blockquote class="tr_bq">
<div id='beforeafter1'> 
<div><img alt='before' src='URL of the first image' width='500' height='291'/></div> 
<div><img alt='after' src='URL of the second image' width='500' height='291'/></div> 
</div></blockquote>
Add the URL of the first image that is the Before image, and the URL of the second image that is the After image. 
It is important that you have specified the width and height of each picture so that they work on all browsers. 
If you want to add more images just change the ID of the container, in this case the container is called beforeafter1 so you need to change it to beforeafter2 and so on, although you can choose any name as long as all are different. 
 
And in the first code to paste, add another line like this one in blue: 
<blockquote class="tr_bq">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> 
<script src='http://http://code.jquery.com/ui/1.10.3/jquery-ui.js' type='text/javascript'/> 
<script src='http://helplogger.googlecode.com/svn/trunk/jquery.beforeafter.min.js' type='text/javascript'/> 
<script type='text/javascript'> 
$(function(){ 
$(&#39;#beforeafter1&#39;).beforeAfter({showFullLinks : true}); 
$(&#39;#beforeafter2&#39;).beforeAfter({showFullLinks : true}); 
}); 
</script></blockquote>
You can add as many before/after images as you like as long as all containers have a different ID and the corresponding lines are added in the script. 
Below each photo container are the "Show only Before" and "Show only after" links that when you click on them, the complete pictures will be shown. If you want to hide these links, then just change true to false in the first code and they will not be displayed anymore. 
 
Note: if you see white space around the drag icons, then search for this code in your template: 
<blockquote class="tr_bq">
   <Group description="Images" selector=".main-inner"> 
     <Variable name="image.background.color" description="Background Color" type="color" default="#ffffff" value="#ffffff"/></blockquote>
... and change the #ffffff value in red to transparent. 
 
Autor: <a href="http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/" rel="nofollow">Catch my fame</a></div>

Blog Design Image Effects jQuery Before/After Photo Effect with jQuery

If you have a design or makeup blog, or if you are using before and after image comparison , this script will surely be very useful for you...