Create a CSS3 Image Hover Effect with Animated Vinyl Record alphause

Helplogger Home Blog DesignWidgets SEO Menus Po ... Create a CSS3 Image Hover Effect with Animated Vinyl Record 5 comments 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. Demo:hover over the album cover and see how CSS reveals further information: How to Apply The Animated Vinyl Record on Blogger Images Step 1.From your Blogger's Dashboard, go toTemplate> click on theEdit HTMLbutton: Step 2.Click anywhere inside the code area and press the CTRL + F keys to open the search box: Step 3.Type or paste inside the search box the tag below and hit Enter to find it: ]]>Step 4.Just above]]>add the following code: Click to expand the code Step 5.Click on theSave templatebutton 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: How to upload images and get the URLs Step 6.When you create a post, add this code inside the HTML section:

TEXT HERE

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: TEXT HEREStep 7.Publish your post and you're done! Enjoy! Like 1 Random Posts 4 Alternatives to Google AdWords20/10/2013 - 0 Comments Google Translate Widget with Flags For Blogger28/04/2012 - 22 Comments How to Create Magazine Style with Post Summaries and Thumbnails on Blogger02/01/2014 - 31 Comments Related Posts: How to Add CSS code To Blogger usin... How to add custom Variable definiti... Understanding the Page Elements of ... What is the difference between padd... CSS3 Transition Property Basics 5 comments: Hamza Butt 2/01/2014 Really one of the nicest hover effects, thanks for sharing.! Reply Zahid Bin Abdur Rouf 2/01/2014 Very nice and detail tutorial on CSS3 image hover. Thank you for sharing this post. Reply Divy Singh Rathore 2/07/2014 Good Hover Effect, thanks for sharing this CSS Reply ob session 3/10/2014 Unbelievable! and I am a HUGE Pink Floyd fan! :D Amazing website and help for all Bloggers, I have just found it, read around for more than an hour and I must say, very good job, guys! Following now :-) Regards Reply Replies Admin 3/10/2014 Thanks for the feedback! :) Add comment Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,775 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments Joseph V M Hi, I've added pagination to my blog... dara king good Mel Ancheta You did it finally, thanks admin (: sorry for my late reply... Sandra Harriette It never ceases to amaze just how much we can do with Blogger.... Gabor Sziladi One question i still have...how can i keep distance between my... Popular Posts Simple Recent Posts Widget for Blogger/Blogspot Create A Rollover Image Effect (change image on mouseover) Recent Comments Widget For Blogger How to remove Blogger Picture/Image Shadow and Border Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger 1 Like