Layering using styled components

As I learn Next JS, I’m also building my CSS skills because the visual results are so awesome. This week, I was working on creating this cool layering of elements within a component that renders one element on top of another on hover.

Rendering the products

I did this by creating a quick array of my art pieces in my data.js file.

I rendered my items through the Products component. I map over the array of products and display each item, including unique keys (item.id) for each item.

For styling, I created a padding around each product. Display flex arranges the products into columns so that several images can be rendered horizontally. I set the flex-wrap property to wrap so that when I have many more products, they’ll be wrapped into multiple lines instead of running endlessly on one line. According to MDN docs, justify-content property “defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.” The center justify packs items around the center, instead of start, for example, which packs them along the left, or space-between, which pushes items along the left and right edges of the window.

Product Display

For each product, I’m rendering interactive icons — shopping cart, search, and favorite, which I imported from material UI.

Here is the code for rendering the icons within the info element.

The product container

Using the following code, I set the size of each product container, which contains the image and info. Each container has a set size, alignment, and background color. Notice that on hover, I render the info container. I will walk through that next.

Below is the code for my info container, which renders on hover (over each product). The gray info div will render over 100% of the product container when hovered over.

Within the info div, I render the three icons I imported (see above for the return method). Below is the CSS for the icons. The width and height specs set the size of the icon to be enclosed inside their circles, with a 50% radius around the icons. I aligned the items vertically and horizontally. Then, I added some animation using the hover event.

When I hover over a particular icon, it displays 10% bigger and its background color changes. This is great for user engagement — it encourages a click! Below is the search icon on hover.