Yesterday we had a look at the
map element, and as mentioned, there might be a better solution nowadays.
Today we'll be looking at creating a very similar effect, but with cool hovers.
HTML Structure permalink
<a href="#sky" class="overlay overlay-sky"></a>
<a href="#sea" class="overlay overlay-sea"></a>
<a href="#sand" class="overlay overlay-sand"></a>
So what we are doing is creating a container div, with the image inside and our overlay areas. We are making three areas here to click on.
CSS Structure permalink
We are going to use
position: absolute to position the area's correct. Therefore the container needs to be relative and inline.
And then for the overlays the share the following
And then for the specific ones:
And last we will add a very simple hover to demonstrate.
background: rgba(0, 0, 0, 0.3);
View and play on this Codepen.
Browser Support permalink
So this can be supported by every browser! It might need some hacks in the old Internet Explorers.