Brook Preloader

Hover over text box css transitions snippet

Hover over text box css transitions snippet

Recently I had a client who wanted to add a hover over style effect where a button and text was hidden at first and when a user hovers over the box both hidden divs appear smoothly.

I thought at first I was going to have to code this using Javascript toggle class or add/remove class but after giving it some thought I remembered that this was just the kind of job that CSS3 was built for.

Below is an example of what I’m going to show you how to create using only CSS3:

I started by writing out the html for the containers and an example image, text and button:

I wrote it out as a container that has an image, an overlay box that contains the text and a button below that.

I think wrote some styles for the elements in the html using relative positioning for the container and absolute positioning for the overlay text and button. The absolute positioning allowed me to position my button at the top and my text below. I then styled the image overlay using Contrast css to darkened in slightly when hovered and gave it a transition so that it faded smoothly instead of just jolting to 50% black.

To make sure the overlay box text was positioned evenly in the box I added transition css and then I was done!

the css snippet is below:

Once done you should end up with something like this:

Any questions drop me an email to aaron@diamondcollective.co.uk