Get Latest Tips and Templates For Blogger,Wordpress

Latest

Thursday 1 November 2018

How To Add Auto Zooming Effect In Blogger Images

Many Bloggers wish to have a responsive blog to attract users and for that purpose they search for different responsive template such as a template having responsive social sharing buttons, popular post widget, images zooming effect etc. But I prefer simple template so why don't they make simple template attractive and responsive, So I brought a css(cascading style sheet) effect which makes blog post images to auto zoom on mouse hover. You have to add a small piece of code to make your blog post images zoom automatically on mouse hover. 


Follow the below steps to make your blog images responsive and attractive:

(1). Go to Blogger.com and log-in to your account.



(2). Go to Template and click Customize.



(3). On the customization page click Advanced and scroll down to the last option (Add CSS).



(4). Copy and paste the below code in Add css tab.


/* CSS image zoom effect by https://technicalmaher.blogspot.com/ */.post img { -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease }.post img:hover {width: 93%;height: 93%;}/*CSS image zoom effect https://technicalmaher.blogspot.com/ */
(5). Click Apply to blog on the top-right of the page and you are done!

(6). Check your blog for changes.


Sharing Is Caring! Share if you like :)

No comments:

Post a Comment