<style>/*<!--<head>
<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2059347577744616049&zx=cb08d996-6964-4a8b-9bce-ff9430f17dc0' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2059347577744616049&zx=cb08d996-6964-4a8b-9bce-ff9430f17dc0' rel='stylesheet'/></noscript>
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1633184471074840&host=ca-host-pub-1556223355139109" crossorigin="anonymous"></script>

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

</head>--></head><body data-lang='default' data-theme='default' id='nB'>*/</style>

How to add Shaking hover effect on post image

Anupam May 03, 2020 - 1 min read

Hey Folks,
I am up with another interesting tutorial of CSS. In this tutorial, we will learn how to shake an image using CSS when hover on the image. So you must have seen ads on many websites. As soon as you take your pointer to the ad, it starts shaking.

How to add Shaking hover effect on post image

Code to shake an image on hover using CSS

Log in to your blogger account
Open theme menu then click edit html.
Copy the following css then add it in <b:skin>
After that save the template
DOWNLOAD CSS

I hope you understand the code well. Feel free to ask your doubts in the comments section. Now you can run the code on your browser to see the result. You can see the image shake when you hover on it.

<style>/*
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2591855913-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY458BFquN_e5CIkD2c1sSO0HMZ9WQ:1730528796705';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2059347577744616049','//anutrickz.blogspot.com/2020/05/shaking-hover-effect-on-post-image.html','2059347577744616049');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '2059347577744616049', 'title': 'ANUTRICKZ', 'url': 'https://anutrickz.blogspot.com/2020/05/shaking-hover-effect-on-post-image.html', 'canonicalUrl': 'https://anutrickz.blogspot.com/2020/05/shaking-hover-effect-on-post-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/2478690788729533661/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-1633184471074840', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': true, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/6eb7ce967db05cf0', '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': 'Twitter', 'key': 'twitter', 'shareMessage': 'Share to Twitter', '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': '2478690788729533661', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHiYV47AZEHxgd2s_3XCuQDuCmylBhAJM4zkBmBjUz1UQKkms87qP6j88z5qEVzy4r5f2d5IBwCrxv4UJNMNCdVbuOQXiv2C2SQ55EFIy00Pw2Vv9ACQxCvGmaDplfUs-uHVJ8bkK7bNg/s72-c/maxresdefault.jpg', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHiYV47AZEHxgd2s_3XCuQDuCmylBhAJM4zkBmBjUz1UQKkms87qP6j88z5qEVzy4r5f2d5IBwCrxv4UJNMNCdVbuOQXiv2C2SQ55EFIy00Pw2Vv9ACQxCvGmaDplfUs-uHVJ8bkK7bNg/s400/maxresdefault.jpg', 'pageName': 'How to add Shaking hover effect on post image', 'pageTitle': 'ANUTRICKZ: How to add Shaking hover effect on post image', 'metaDescription': 'how to,hover effect,css button shake effect on hover,css hover effects,hover effects on image,css image hover effects,image shake effect on hover over using html and css,button hover effect,shake effect on images,how to shake image,image hover effect css3,css button hover effects,how to animate effects,shake effect,effects,effect,css shake effect,css effects,hover effects'}}, {'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': 'How to add Shaking hover effect on post image', 'description': 'how to,hover effect,css button shake effect on hover,css hover effects,hover effects on image,css image hover effects,image shake effect on hover over using html and css,button hover effect,shake effect on images,how to shake image,image hover effect css3,css button hover effects,how to animate effects,shake effect,effects,effect,css shake effect,css effects,hover effects', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHiYV47AZEHxgd2s_3XCuQDuCmylBhAJM4zkBmBjUz1UQKkms87qP6j88z5qEVzy4r5f2d5IBwCrxv4UJNMNCdVbuOQXiv2C2SQ55EFIy00Pw2Vv9ACQxCvGmaDplfUs-uHVJ8bkK7bNg/s400/maxresdefault.jpg', 'url': 'https://anutrickz.blogspot.com/2020/05/shaking-hover-effect-on-post-image.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 2478690788729533661}}, {'name': 'widgets', 'data': [{'title': 'ANUTRICKZ (Header)', 'type': 'Header', 'sectionId': 'header', 'id': 'Header1'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'postContent', 'id': 'Blog1', 'posts': [{'id': '2478690788729533661', 'title': 'How to add Shaking hover effect on post image', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHiYV47AZEHxgd2s_3XCuQDuCmylBhAJM4zkBmBjUz1UQKkms87qP6j88z5qEVzy4r5f2d5IBwCrxv4UJNMNCdVbuOQXiv2C2SQ55EFIy00Pw2Vv9ACQxCvGmaDplfUs-uHVJ8bkK7bNg/s400/maxresdefault.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': 'Popular posts', 'type': 'PopularPosts', 'sectionId': 'popular', '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}, {'title': 'How to Create Automatic Safelinks on Blogger\x27s Main Blog', 'id': 4387528619928926608}]}]}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'postContent', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts2', 'popular', document.getElementById('PopularPosts2'), {}, 'displayModeFull'));
</script>
</body>*/</style>

Code to shake an image on hover using CSS

How To Add Custom Google Translate Button On Your Website?

Anti Adblock Script for blogger | How to Add Adblock detection script [ 2022 ]

[ UPDATED ] How To Add Copy And Share Buttons In Blockquotes

How To Add Custom Google Translate Button On your Website?

How to Create Automatic Safelinks on Blogger's Main Blog