Tutorial: Creating A CSS-Only Image Hotspot Element In WordPress With Oxygen

Check out this video to learn how to add hotspots to an image using Oxygen’s Attributes feature. Once your hotspots are working nicely, we’ll show you how to animate the hover effect using CSS Keyframes. Keeping accessibility in mind, you can also use keyboard navigation or screen readers to navigate the hotspots.

CSS attribute selectors

This can be really useful in CSS as it allows you to easily select all elements that have those attributes. For example, to select all elements that have the tooltip attribute, you can type [tooltip] in your CSS.

CSS attribute function

CSS also allows you to extract the value of the attribute. For example, you can retrieve the value of your tooltip attribute by typing attr(tooltip).

CSS animations

You can use Keyframes in CSS to animate content on your page. There’s more information and some examples on the page here: https://www.joshwcomeau.com/animation/keyframe-animations/.

CSS used in the video: https://gist.github.com/Spellhammer/dd356adb341adf98d11915cd3a15f2b6.