Oxygen 4.0 is now available - see what's newlimited time special pricing available
Posted on March 20, 2022

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

hello world!

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Oxygen Today

Lifetime, unlimited site license

Copyright © 2022 Soflyy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram