I hope everyone is healthy is good. At today's CSS3 What style will show a link to the blog Zoom will show the image. Moreover, the blog post we have a lot of time with small images. When you place your mouse over the photo Zoom the image of the show. There are other ways, but I think it's convenient. Let's take a look.
How will this add to your blog widgets....
- First, login to your Blogger Blog.
- From the Dashboard, click on the Template → Edit HTML.
- Now press CTRL + F on your keyboard Look for the tag below.
]]></b:skin>
- When looking at the top of the tag just before putting it in the bottom of the CSS code.
</style><style type="text/css">
/*URL: http://tomarijonnor.blogspot.com */
.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
}
.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
opacity: 1;
}
</style>
/*URL: http://tomarijonnor.blogspot.com */
.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
}
.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
opacity: 1;
}
</style>
- Now Save your work.
Now when you go to the zooming effect on any blog post to any image you want, then class = "hover gallery" specific image <div> tag should be.
- Take a look down the well.
<a class="hovergallery" href="http://gulpatutorial.blogspot.in/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM6A6Tm7QtlnLqDF7S4OQPNdIaIO-CWRjNNah4ccocGMp0xoStLqn3Z5smauDVLj_0fZMuaTp9gatjZ5DymWDjxEABjkJFJl1Oj6WgrtzTqliYePvd1rO_DIl3ZeD4d1ZBxiK_zRXy1tN9/s1600/Parvej+Alam+%252849%2529+copy.png"/>
Note: The Green Color of the enclosed part of the link. The Blue Color of the enclosed part of the Photo.
Author:
My name is Parvej Alam. Founder of Gulpa Tutorial Ltd. I am a student of JNU Calcutta branch of the BCA is studying in 3rd year.
He loves to share his thoughts with others like helping others
in the niche of HTML,CSS,JavaScript, C Programming, Microsoft Excel Formula and other Blogger and Computer Tips.
Currently he is living in Malda (West Bengal). You can find him on various Social Media Networks given Below.
Post a Comment
0 comments
Dear readers, after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me. Thank you.