<style>/*<!--<head>
<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2059347577744616049&zx=4436740d-adbc-46ce-9846-829255513342' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2059347577744616049&zx=4436740d-adbc-46ce-9846-829255513342' rel='stylesheet'/></noscript>
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

<!-- data-ad-client=ca-pub-1633184471074840 -->

</head>--></head><body class='is-post is-single single-id-5332033652382335386' data-lang='default' data-theme='default' id='nB'>*/</style>

ANUTRICKZ

Beautiful Hover Effect For Post Thumbnail Image Using Pure CSS - blogger/Blogspot

Beautiful Hover Effect For Post Thumbnail Image Using Pure CSS - blogger/Blogspot,css hover effects for photos blogger post image,multi hover effect on blogger images using pure css,10 easy image hover effects for blogger,create a hover effect on blog images,hover effect on blogger images,css,css hover effect,how to remove hover link effect from images without removing border,post thumbnails,hover effects,fire effect on blogger,how to get fire effect on blogger

Beautiful Hover Effect For Post Thumbnail Image Using Pure CSS - blogger/Blogspot

Anupam December 16, 2019 - 1 min read

CSS is an amazing technology, with its help you can create truly amazing things. Using 'all that power' you can add any sorts of visual effects to your resource. So today we'll talk about CSS Image Hover Effects. We've prepared a round-up of tutorials for you to add some motion to your designs.

Beautiful Hover Effect For Post Thumbnail Image

How To Set Up Image Hover Effects?

The hover effect is power by CSS

1. From your blog’s Blogger page, go to Template > Edit HTML

2. look for the code .img-thumbnail

3. Then add this css Transition value inside

4.then add this css line After .img-thumbnail

.img-thumbnail:hover{-webkit-filter:brightness(.4)}

5. Look For the code .img-thumbnail img

6.Then add this css Transition value inside

transition:all .3s ease-in-out

How is the effect working on your blog ? I guess its great but if you are having any difficulties in applying this effect at any point drop your comments.

<style>/*
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2726972568-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY5wQpLEFTv5K1m3uDz9_7qmC5quBg:1751250979087';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2059347577744616049','//anutrickz.blogspot.com/2019/12/beautiful-hover-effect-for-blogger-image.html','2059347577744616049');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '2059347577744616049', 'title': 'ANUTRICKZ', 'url': 'https://anutrickz.blogspot.com/2019/12/beautiful-hover-effect-for-blogger-image.html', 'canonicalUrl': 'https://anutrickz.blogspot.com/2019/12/beautiful-hover-effect-for-blogger-image.html', 'homepageUrl': 'https://anutrickz.blogspot.com/', 'searchUrl': 'https://anutrickz.blogspot.com/search', 'canonicalHomepageUrl': 'https://anutrickz.blogspot.com/', 'blogspotFaviconUrl': 'https://anutrickz.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'G-TS2WXBJ1XV', 'analytics4': true, 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': false, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ANUTRICKZ - Atom\x22 href\x3d\x22https://anutrickz.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22ANUTRICKZ - RSS\x22 href\x3d\x22https://anutrickz.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ANUTRICKZ - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/2059347577744616049/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ANUTRICKZ - Atom\x22 href\x3d\x22https://anutrickz.blogspot.com/feeds/5332033652382335386/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-1633184471074840', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/db21581542f87c3c', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': true, 'jumpLinkMessage': 'Continue Reading \xbb', 'pageType': 'item', 'postId': '5332033652382335386', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirzliY2ytHhwnzXnc-PsZvBJeCHnuZ6_9x_4udci-7RzlKlO3cIN3GlVMhaEx6nNrnuFlk8195eveVSpQt55Oim7QbZvvsZmEqOQJM_f9H40f1sw1oIQ9ywBj7ETAEXgXYw167sy8fFE0/s72-c/maxresdefault+%25281%2529.jpg', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirzliY2ytHhwnzXnc-PsZvBJeCHnuZ6_9x_4udci-7RzlKlO3cIN3GlVMhaEx6nNrnuFlk8195eveVSpQt55Oim7QbZvvsZmEqOQJM_f9H40f1sw1oIQ9ywBj7ETAEXgXYw167sy8fFE0/s640/maxresdefault+%25281%2529.jpg', 'pageName': 'Beautiful Hover Effect For Post Thumbnail Image Using Pure CSS - blogger/Blogspot', 'pageTitle': 'ANUTRICKZ: Beautiful Hover Effect For Post Thumbnail Image Using Pure CSS - blogger/Blogspot', 'metaDescription': 'Beautiful Hover Effect For Post Thumbnail Image Using Pure CSS - blogger/Blogspot,css hover effects for photos blogger post image,multi hover effect on blogger images using pure css,10 easy image hover effects for blogger,create a hover effect on blog images,hover effect on blogger images,css,css hover effect,how to remove hover link effect from images without removing border,post thumbnails,hover effects,fire effect on blogger,how to get fire effect on blogger'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Beautiful Hover Effect For Post Thumbnail Image Using Pure CSS - blogger/Blogspot', 'description': 'Beautiful Hover Effect For Post Thumbnail Image Using Pure CSS - blogger/Blogspot,css hover effects for photos blogger post image,multi hover effect on blogger images using pure css,10 easy image hover effects for blogger,create a hover effect on blog images,hover effect on blogger images,css,css hover effect,how to remove hover link effect from images without removing border,post thumbnails,hover effects,fire effect on blogger,how to get fire effect on blogger', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirzliY2ytHhwnzXnc-PsZvBJeCHnuZ6_9x_4udci-7RzlKlO3cIN3GlVMhaEx6nNrnuFlk8195eveVSpQt55Oim7QbZvvsZmEqOQJM_f9H40f1sw1oIQ9ywBj7ETAEXgXYw167sy8fFE0/s640/maxresdefault+%25281%2529.jpg', 'url': 'https://anutrickz.blogspot.com/2019/12/beautiful-hover-effect-for-blogger-image.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 5332033652382335386}}, {'name': 'widgets', 'data': [{'title': 'ANUTRICKZ (Header)', 'type': 'Header', 'sectionId': 'header', 'id': 'Header1'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'content', 'id': 'Blog1', 'posts': [{'id': '5332033652382335386', 'title': 'Beautiful Hover Effect For Post Thumbnail Image Using Pure CSS - blogger/Blogspot', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirzliY2ytHhwnzXnc-PsZvBJeCHnuZ6_9x_4udci-7RzlKlO3cIN3GlVMhaEx6nNrnuFlk8195eveVSpQt55Oim7QbZvvsZmEqOQJM_f9H40f1sw1oIQ9ywBj7ETAEXgXYw167sy8fFE0/s640/maxresdefault+%25281%2529.jpg', 'showInlineAds': false}], 'headerByline': {'regionName': 'header1', 'items': [{'name': 'timestamp', 'label': ''}]}, 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'comments', 'label': 'Comment'}, {'name': 'labels', 'label': ''}]}], 'allBylineItems': [{'name': 'timestamp', 'label': ''}, {'name': 'comments', 'label': 'Comment'}, {'name': 'labels', 'label': ''}]}, {'title': '', 'type': 'HTML', 'sectionId': 'sidebar-section', 'id': 'HTML2'}, {'title': '', 'type': 'HTML', 'sectionId': 'sidebar-section', 'id': 'HTML1'}, {'title': 'Popular posts', 'type': 'PopularPosts', 'sectionId': 'sidebar-section', 'id': 'PopularPosts2', 'posts': [{'title': 'How To Add Custom Google Translate Button On Your Website?', 'id': 5371994812086292964}, {'title': ' Anti Adblock Script for blogger | How to Add Adblock detection script [ 2022 ] ', 'id': 9130507176988353748}, {'title': '[ UPDATED ] How To Add Copy And Share Buttons In Blockquotes', 'id': 4111069201761851050}, {'title': 'How To Add Custom Google Translate Button On your Website?', 'id': 6486639804398665261}]}]}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'content', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'sidebar-section', document.getElementById('HTML2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'sidebar-section', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts2', 'sidebar-section', document.getElementById('PopularPosts2'), {}, 'displayModeFull'));
</script>
</body>*/</style>