Pure CSS Text Box Hover Effect

Text Box Hover Effect

One of the best ways to create dynamic effects on your website is to use CSS transitions and effects. Trying to understand how these work isn’t so easy if you’re new to CSS. Even if you’ve been around a while, it can be a challenge to create a hover effect using CSS. Today, I’m starting a series where I create CSS effects that you can use on your website. Today’s effect is going to be a text box hover effect that you can place over images.

Text Box Hover Effect

A text box hover effect over your images is a beautiful and efficient way to save space on your site. It’s also interesting to visitors, because information is revealed when they hover over an image. This is a popular affect that you see on the lot of blogs. When the user hovers their mouse over an image, the title in a brief excerpt appears. This can be done with a subtle transition, such as a fade or a sliding motion. Today’s effect simply fades in.

Downloading the source files is a great way to pick apart how this effect works. You can take a look at the divs and the CSS that is applied to them. This will give you an idea of how to control this effect. You can easily change the background color of the text box to match the colors found on your website. This will create a cohesive and unified look, while adding an eye-catching transition.

You can view a demo of this hover effect here.

Text Box Hover Effect (Source Files)

If you would like to download the source files, I would really appreciate it if you would click one of the sharing boxes below. Once you do that and share this post, the download link should appear and you can access the source files. If the link doesn’t appear instantly, refresh the page. I want to make sure you get this, especially if you share my post, so if you have any problems even after refreshing the page, send me an email and I’ll send you the files directly.

2 Comments

  1. michael January 30, 2015
  2. Stefano November 13, 2015