{"id":2349,"date":"2016-09-07T10:54:17","date_gmt":"2016-09-07T00:54:17","guid":{"rendered":"http:\/\/codemyui.com\/?p=2349"},"modified":"2018-05-17T09:53:26","modified_gmt":"2018-05-16T23:53:26","slug":"hotspot-image-pulsating-effect","status":"publish","type":"post","link":"https:\/\/codemyui.com\/hotspot-image-pulsating-effect\/","title":{"rendered":"Hotspot on Image With Pulsating Effect"},"content":{"rendered":"<p>In this <a href=\"https:\/\/codemyui.com\/tag\/pure-css\/\">pure CSS snippet<\/a> by Matthias Ott we see how to add a nice little pulsating effect to a <a href=\"https:\/\/codemyui.com\/tag\/hotspot\/\">hotspot<\/a> on an <a href=\"https:\/\/codemyui.com\/category\/image-effects\/\">image<\/a>. This <a href=\"https:\/\/codemyui.com\/tag\/cta\/\">call to action element<\/a> can be used to draw the visitors&#8217; attention to a specific section on the image. The hotspot has a nice ring that radiated out every few seconds and it stops when you hover over the hotspot. <\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/252d248b5cc94459e9487cf5e1568992\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='533' data-theme-id='0' data-slug-hash='qEEwXp' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Pulsating Hotspot UI Element by Matthias Ott (@matthiasott) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>In this pure CSS snippet by Matthias Ott we see how to add a nice little pulsating effect to a hotspot on an image. This call to action element can be used to draw the visitors&#8217; attention to a specific section on the image. The hotspot has a nice ring that radiated out every few&hellip;<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/hotspot-image-pulsating-effect\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":2352,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[42325,313764,1745484,30305495],"class_list":["post-2349","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-cta","tag-hotspot","tag-image-effects","tag-pure-css","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/hotspot-on-image-with-pulsating-effect.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":142,"url":"https:\/\/codemyui.com\/pure-css-pulsating-avatar-image-effect\/","url_meta":{"origin":2349,"position":0},"title":"Pure CSS Pulsating Avatar Image Effect","author":"Hima Vincent","date":"October 8, 2015","format":false,"excerpt":"Check out this simple CSS animation for having ripples pulsate out of the avatar. Designed by Blixt. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"image effects\"","block_context":{"text":"image effects","link":"https:\/\/codemyui.com\/tag\/image-effects\/"},"img":{"alt_text":"Pure CSS Pulsating Avatar Image Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-pulsating-avatar-image-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-pulsating-avatar-image-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-pulsating-avatar-image-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-pulsating-avatar-image-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":2191,"url":"https:\/\/codemyui.com\/image-multiple-hotspot-activates-hover\/","url_meta":{"origin":2349,"position":1},"title":"Image With Multiple Hotspot That Activates on Hover","author":"Hima Vincent","date":"September 1, 2016","format":false,"excerpt":"This snippet by Adam Grayson adds a bunch of hotspots to any image, these hotspots will remain in the same location when you resize the images. When you hover over the hotspots, it will reveal a message that you associate with each region, these are a great way to onboard\u2026","rel":"","context":"In \"hidden content\"","block_context":{"text":"hidden content","link":"https:\/\/codemyui.com\/tag\/hidden-content\/"},"img":{"alt_text":"Image With Multiple Hotspot That Activates on Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/image-with-multiple-hotspot-that-activates-on-hover.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/image-with-multiple-hotspot-that-activates-on-hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/image-with-multiple-hotspot-that-activates-on-hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/image-with-multiple-hotspot-that-activates-on-hover.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26914,"url":"https:\/\/codemyui.com\/notification-ui-with-new-and-old-messages\/","url_meta":{"origin":2349,"position":2},"title":"Notification UI with New and Old Messages","author":"Saijo George","date":"October 2, 2018","format":false,"excerpt":"A simple notification concept UI with a CTA pulsating indicator showing the number of new unread notification. When you click on it you get a tooltip like drop-down with the new and old messages, the old ones are slightly greyed out so it is visually different from the new ones.\u2026","rel":"","context":"In \"CTA\"","block_context":{"text":"CTA","link":"https:\/\/codemyui.com\/tag\/cta\/"},"img":{"alt_text":"Notification UI with New and Old Messages","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/10\/Notification-UI-with-New-and-Old-Messages.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/10\/Notification-UI-with-New-and-Old-Messages.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/10\/Notification-UI-with-New-and-Old-Messages.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/10\/Notification-UI-with-New-and-Old-Messages.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24839,"url":"https:\/\/codemyui.com\/pure-css-pulsating-heart-animation\/","url_meta":{"origin":2349,"position":3},"title":"Pure CSS Pulsating Heart Animation","author":"Hima Vincent","date":"October 26, 2017","format":false,"excerpt":"Everyone loves a good heart animation and this one is a pulsating heart icon animation. If you are having trouble with the pen, try the archived copy on GitHub Pulsating Heart Animation Snippet","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Pure CSS Pulsating Heart Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/pulsating-heart-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/pulsating-heart-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/pulsating-heart-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/pulsating-heart-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":6194,"url":"https:\/\/codemyui.com\/loading-animations\/","url_meta":{"origin":2349,"position":4},"title":"Various Circular Loading Animation Effects CSS Only","author":"Hima Vincent","date":"February 21, 2017","format":false,"excerpt":"These are Pure CSS preloaders that you can use in your next web project, it was designed by Jakob Lewis. There are six different spinners to choose from: Three out of sync lines spinning around Hour and minute hand of a clock Pulsating circle A line spinning around Something like\u2026","rel":"","context":"In \"pure css\"","block_context":{"text":"pure css","link":"https:\/\/codemyui.com\/tag\/pure-css\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/loading-animations.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/loading-animations.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/loading-animations.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/loading-animations.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30354,"url":"https:\/\/codemyui.com\/various-modern-neumorphic-elements-design\/","url_meta":{"origin":2349,"position":5},"title":"Various Modern Neumorphic Elements Design","author":"Hima Vincent","date":"June 9, 2021","format":false,"excerpt":"Code by: Maria M. Mu\u00f1oz If you are having trouble with the pen, try the archived copy on GitHub. Neumorphic Elements Design Snippet","rel":"","context":"In \"neumorphic design\"","block_context":{"text":"neumorphic design","link":"https:\/\/codemyui.com\/tag\/neumorphic-design\/"},"img":{"alt_text":"Various Modern Neumorphic Elements Design","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Various-Modern-Neumorphic-Elements-Design.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Various-Modern-Neumorphic-Elements-Design.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Various-Modern-Neumorphic-Elements-Design.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Various-Modern-Neumorphic-Elements-Design.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/2349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=2349"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/2349\/revisions"}],"predecessor-version":[{"id":26051,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/2349\/revisions\/26051"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/2352"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=2349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=2349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=2349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}