Photo by Marc Sendra martorell on Unsplash

HOW TO: Creating a CSS overlay for a circular image.

Or any shaped image for that matter 🐵

Circular images can be quite popular. So can hover state overlays. How do you combine the two? You essentially create a wrapper for your <img> element. The nice thing about this is that you can use them for fancy looking links too! 😎

For those in camp TL;DR here’s a demo!

HTML

In this example, I’ll show how we can create clickable links that show an overlay on :hover.

<a class="img" href="#">
  <div class="img__overlay">Hey!</div>
  <img src="https://someimageurl.jpg"/>
</a>

We have an anchor tag that is wrapping our image and a separate element for our overlay that also lives inside that wrapper. The nice thing about the separate overlay element is that we can put anything we want in there such as text, another image etc.

Can’t you just use pseudo elements for the same effect?