Skip to main content

How To Add Zoom Effects To Blogger Images On Mouse Hover

Normally the zoom effect is visible on eCommerce site. Zoom effect helps user to observer a product from very near. When a user hovers mouse on an image, the image size becomes large. This post will teach you how to add zoom effect to any image on mouse hover in your blog. Read also : How to lock and unlock your android phone.

If you have a little bit knowledge of HTML then you won't face any kind of problem but if you are newbie in the field of blogging you may face difficulty in adding some codes in your template. Read also How to add Facebook comment box to blogger.

Important Note!

Your template is place where you can do lots of experiment with the different codes. Before changing or doing anything in the template, I always recommend everyone to anyone to take backup of your template. It helps you to recover your template from an unexpected error. Read also : How to make money from Bigrock.

http://demomanidin.blogspot.in/2015/08/zoom-effect-testing.html

Steps to Add Zoom Effect

Now lets start adding zoom effect to any image. At first you need to login to your blogger dashboard and then click Template and click Edit HTML. Now you will see all the coding of your template. Read also : How to Setup AdSense Page Level Ads and Fix Script Error.

Now click anywhere inside the code and press Ctrl + F on the keyboard to get search box. Type     ]]></b:skin>     and hit enter on the keyboard. Just above   ]]></b:skin>    paste the below CSS code and after that click Save Template. Read also : How to monetize YouTube video that matched third party content..

.zoomeffect img{
-webkit-transform:scale(0.7);
-moz-transform:scale(0.7);
-o-transform:scale(0.7);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.8;
margin: 0 10px 5px 0;
}
.zoomeffect img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

Activate Zoom Effect On Images

After saving the template, write a new post and upload an image. Once image upload is complete switch to HTML mode. Now find the div tag for your image which looks like below. Read also Best SEO tools to analyze a website

 <div class="separator" style="clear: both; text-align: center;">

Now you just need to replace the class attribute whatever it is to zoomeffect. Normally class attribute is separator. The new div tag looks like below. Read also : How to make Money from Google Apps.

<div class="zoomeffect" style="clear: both; text-align: center;">

That's it! Thanks for reading the post. Let me know whether you have experienced zoom effect in your blog.  If not, then try now. Let others to experience this feature by sharing this post on your social networks.



Recommended Post
Big on Hosting. Unlimited Space & Unlimited Bandwidth

Comments

Popular posts from this blog

How To Change Default File Download Path in UC Browser

All of us known that UC browser is the most popular, fast and less data consuming mobile browser for android devices. Many of us use UC browser on daily basis on our smart phones. By default UC browser has download path to internal memory device which is /storage/sdcard0/download. sdcard0 is the built in memory or internal memory of your device. Read also : How to fix HTTP and HTTPS Mixed Content Errors.

Do you know that this default download path can be changed? Since, internal memory is fixed, and once you exceed this value you can't download more. You need to move some data from mobile memory to the external memory which is sdcard1. If you change this default path to external memory card (sdcard1), you can download more data directly to your desired directory. Read also : How to Setup AdSense Page Level Ads and Fix Script Error.

Here, I will show you, how to change this default download path from internal memory card sdcard0 to external memory card sdcard1. To do so you need to…

How To Rename A WhatsApp Group

We all know that WhatsApp is the most popular messaging service for Android, BlackBerry, iPhone and for other platforms. In this post, I will show you how to rename an existing WhatsApp group. To rename an existing WhatsApp group your smartphone must have internet connection. After that you need to follow the below steps. Read also : How to track lost/stolen mobile phone and erase data remotely.


Step 1. Open WhatsApp application on your smartphone.

Step 2. After that you need to click CHATS tab and click on your group name.



Step 3. Once you click on your group name, you will able to see chat details. Now you need to click vertical dots located extremely top right corner and then click Group info. Read also : How to setup AdSense page level ads.


Step 4. Now you can easily rename your group. To rename the group just click Edit icon and then type the desired group name and click OK. Read also : How to protect your computer from WannaCry ransomware virus.


In this way you can rename a What…

Calculation of Total Marks, Percentage, Division, Remarks, Maximum & Minimum Number of Students in MS Excel

In this post, I will help you to learn how to calculate total marks, percentage, division, maximum number, minimum number and remarks of students of a class very fast. At first you need to look over the above image very carefully. The above image shows the marks obtained by six students of a class.

Formula to calculate Total Marks of all students within seconds 

First you need to find out the Total Mark of a single student who is on the top of the list i.e, Mani. To calculate Total Mark of Mani, click on the Total Mark cell address of Mani i.e, H6 and then type the formula =sum(1st subject's cell address i.e, b6:last subject's cell address i.e, g6) and then press Enter on the keyboard or click anywhere on the worksheet. Here b6 and g6 are cell address of 1st subject (English) and last subject (Biology) of that student. Read also : How to Enable HTTPS for Blogger Blog.

After getting results, click on the resultant cell address of Total Mark of the 1st student i.e., Mani an…

WannaCry Ransomware Cyber Attack : How to Protect Your Systems from WannaCry Ransomware Attack

WannaCry virus targets the Microsoft Windows operating system on 12th May and infects more than 2,50,000 computers in 150 countries and demanding ransom payments in the cryptocurrency bitcoin in 28 languages. This was one the largest ever cyber attack in the world. WannaCry or WannaCrypt or Wanna Decryptor is a ransomware programme that targets only Microsoft Windows operating system. This ransomware virus WannaCry locks / encrypts files on a computer and demands payments $300 to $600 to unlock the system.

This ransomware spreads by using a vulnerability in implementations of Server Message Block (SMB) in Windows systems. This exploit is named as EternalBlue and this particular malware known as WannaCry was called "unprecedented" by Europol. When your computer is attacked by WannaCry, you will get the below screen which demand payment to decrypt or unlock your computer. Before WannaCry reach your computer you must take some precaution to secure your computer. Read also :

Change UC Browser Default Homepage in Android Phones

We all know that Android OS operated Smartphones and Tablets are great for web browsing. Like other browsers, uc browser has a default search engine Yahoo is set for web search. UC browser provides different kind of search facilities under 5 different categories namely Web, Video, Shop, Image and APP. Read also : How to protect your computer from WannaCry ransomware virus.

In this post, I will show you how to change the default search engines of uc browser in Android devices for their 5 different categories. To do so you just need to follow the below steps. Read also : How to Enable HTTPS for Blogger Blog.

Change Default Homepage for UC Web search

Step 1. At first you need to open UC browser
Step 2. After that click Search. Follow the below image.


Step 3. Once you click Search, you will able to see the default search engine's icon for Web search like y for Yahoo, g for Google. Now you need to click that search icon. Follow the below image. Read also : How to change UC browser defaul…

Xiaomi Redmi Note 4 Exclusive Launch on Amazon.in today at 12 pm and Next Sale on 30th May

Xiaomi Redmi Note 4 will go on sale today on Amazon at 12 pm. The price in India starts from Rs. 6,999 for 2 GB RAM and 16 GB internal storage variant, Rs. 8,999 for 3GB RAM and 32 GB internal storage variant and Rs. 10, 999 for the 4GB RAM and 64GB internal storage variant. The Xiaomi Redmi Note 4 smartphone's price on Amazon India is less compared to the flipkart's price. Read also : How to protect your computer from WannaCry ransomware virus.


Launch Offers

Xiaomi Redmi Note 4 includes various discounts like flat Rs. 500 cashback with YES Bank debit and credit cards, up to Rs. 5,000 off on flights and hotels booking through GoIbibo and Rs. 200 promotion credit for Kindle app. The company also provide 45GB free data for 5 months to Vodafone users on purchase of Redmi 4 smartphone.



Salient Features

Xiaomi Redmi Note 4 is powered by Qualcomm Snapdragon 435 SoC octa core processor with 4100mAh battery which makes Xiaomi Redmi Note 4 a powerhouse that boasts of better performance and…

Enable Auto Save Forms & Passwords in UC Browser

Many of you use UC browser on daily basis on your smart phone but very less enable this feature. Enabling auto save forms and passwords allows the browser to remember the username and passwords. It gives you relief from entering username & password every time whenever you login to your email. Did you enable auto saving form & password? If not, then do it now. Read also : How to track lost/stolen mobile phone and erase data remotely.

In this post, I will show you how to enable auto save forms & password in UC browser in your Android phones. To do so you need to follow the below steps.

Steps to enable auto save forms and passwords

Step 1. At first open UC browser

Step 2. In the second step, tap on the horizontal bar.


On the next image, you will able to see Bookmarks, History, Refresh etc. icons. Now swipe this menu screen to the left and tap Settings. Read also : How to create custom AdSense Search Engine and make money from it.


Step 3.  Now on the Browser Settings, you w…