In this video, follow along with Elijah and see how to add hotspots to an image using Oxygen’s Attributes feature along with pure CSS. Once the hotspots are showing correctly, you can learn how to animate their hover effect using CSS Keyframes. Accessibility is also taken into account, allowing the hotspots to be navigated via keyboard navigation or screen readers.
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 Add a Tooltip Text 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:
CSS used in the video:
Get Oxygen ➜
Subscribe ➜
JOIN THE OXYGEN FACEBOOK GROUP FOR HELP & SECRET INFO ➜
source