Day 17 - Hover Overlay

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.

You can also set the height here

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.

Since the text container is a child of the overlay component, the opacity rules will also apply

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!