I spent the last three days redesigning my portfolio site and one of the things that took a long time was deciding on a simplified way to display my project details. I chose to create a hover overlay to display the details for each project.

Set Up

We need to start with the following:

• Div container to hover over
• Div container for overlay
• Div container for text

Then we add elements we need for our final component. My example is a component for an image link for an apple pie recipe.

With some initial CSS I have the following:

Positioning

The overlay is about positioning the elements against the parent element.

In this example, we do the following:

• Set parent div (main-container) to relative position
• Set child div (overlay-container) to absolute position
• Set box sizing to border-box (takes manual calculation out of the equation)
• Set child divs to 100% of parent width
• Set flex styles on overlay-component so the text can sit at the bottom
• We also set the height of overlay-component to 100% so when someone hovers over the entire box it will trigger the effect

Setting Up The Text And Dark Background

For the dark background we set a transparent background. We will use opacity when we adjust the opacity during hover. We also make the text color white.

Creating The Hover Effect

Set an opacity of 0 to the overlay-component, then in the hover property, we set the opacity to 1 to show the dark background and text.

Make It Fancy!

I added a transition property to make a sliding effect. See the complete code here.

What I Learned

More practice with building animation hover effects.

How This Will Help Me

Having the ability to create this component from memory adds to my toolkit!

Onto the next challenge!