Multi Hover Effect On Blogger Images Using Pure CSS alphause

Helplogger Home Blog DesignWidgets SEO Menus Po ... Multi Hover Effect On Blogger Images Using Pure CSS 11 comments Today I'm going to show you how to add an amazing mouseover effect for Blogger images using only CSS, in which moving your mouse over an image from different directions (from above, from below, etc) will cause an overlay transitioned in from the same vector. This trick will change not only the images appearance when moving mouse over them, but will also allow you to add inside a text with a description. You can see the effect on this image below: try moving your mouse from the left, right, and above. Adding Hover Effect From Different Directions on Blogger ImagesFirst thing to do is to add the CSS style to our Template: Step 1.From Blogger Dashboard, go toTemplateand press theEdit HTMLbutton Step 2.Search for thetag - to find it, click anywhere inside the code area, press CTRL + F keys and type it in the search box. Step 3.After you found it, add the following style just above it: Step 4.Save the Template Now we are going to add the HTML that is nothing but a DIV where we included four SPAN tags with texts and an image: Step 5.ChoosePosts, create aNew Post, click on theHTMLtab (1) and paste this code inside the empty box:

hover right hover top hover left hover bottom

Add your own text/description to "hover right", "hover top", "hover left" and "hover bottom" (2) and replace the url in blue with the image URL (3) where you want to apply the effect. Important!Do not click on theComposetab, otherwise the changes will be lost. Step 6.After you finished editing your post, clickPublish(4) And that's it... enjoy! :) Like 11 Random Posts How to Change Default Anonymous Avatar in Blogger Comments06/05/2012 - 49 Comments Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect06/04/2012 - 35 Comments Top Commentators Widget with Avatars for Blogger21/10/2013 - 4 Comments Related Posts: Create a CSS3 Image Hover Effect wi... Before/After Photo Effect with jQue... Rounded Corners and Shadows for Ima... How to Add Numbered Page Navigation... Add a Custom jQuery Lightbox To Blo... 11 comments: ROHIT MEWADA 5/31/2013 where is the effect ?? Blog of Blogger.com Reply M Nirmal Anandh 5/31/2013 useful tips for blogspot users... http://www.classiblog ger.com Reply Dixit Dhinakaran 5/31/2013 For me it's not working ! I simple share this in my blog at http://www.triposoft. com/2013/05 /add-cool-mouse- over-effect- on-blogger.html Reply Replies jempot2 office 6/04/2013 Thank you, I've tried, and this script works on my blog. I try to post the picture below John Cena 6/01/2013 Wow, amazing! I will definitely use this css code in my blog post to make it attractive and effective as well. Thanks for sharing this wonderful post with us! Regards, Orlando Website Design Reply Haruka Truong 6/09/2013 How can I display the comments and read more, date published like site: http://www.hikarinoa kariost.com/ Please show me. Reply Harjeet Singh 6/12/2013 This is what i've been searching for. Multi hover using css3. Thank you how to design with css Reply aesthete sha 6/13/2013 THANX DUDE :) Reply german translation service 6/26/2013 This effect will help you to decorate your blog.It is very colorful with nice hover effect. The link can change in appearance in many ways, from a simple color switch to a complete morph into another typeface and size. Reply Datta Gsr 9/14/2013 Nice Post Bro.... With Regards www.newblogger- tricks.blogspot.in Reply Muhammad Rafique 12/22/2013 Nice Post bro www.adsnetworkrevi ews.com Reply 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,784 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 irsah imihar Customizing will always be easy with jquery and javascript. Even... Missy G Yay! Thank you for making this so easy! This is just what I... divakar sivashankar admin i have a problem even if i add the tag the ad is showing up... Anonymous I don't understand the instructions you have given :( Nanette Benablo your site is very helpful and easy to follow tutorials. thank you... 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 11 Like