Add Overlay Search Icon to Any Element with CSS3!

Oh how I love CSS3. Its so great to not have to use javascript when you don’t have to. Now, hovering over an image and showing a nice animated hover icon show up is a real nice effect. So lets build one!First lets build a shape. I’m just going to build a circle. (if you don’t know how to build a circle in CSS, then its bonus!)

Web Design


Notice that I added a position of relative to the circle. This is going to nest our overlay. !important 🙂 Now, lets go ahead and build our hidden overlay that will show up when we hover. First created the nested div inside your circle div. Then add Font Awesome icon “search” to your code. As you can see without any css, the search icon shows up next to our “web design” text

Now lets add our css and transparency to the overlay. We need to add the rgba color, because this will allow us to use opacity in the effect. The transitions are crucial here. Please note. At the bottom is our hover state. See that the transitions will grab the font-size, opacity and the z-index.

Presto! Looking good. Fairly easy to accomplish, all in css.

Web Design

Share This:

Leave a Reply

Your email address will not be published.