How to Overlay Box-Shadow Effects using CSS

Box shadow covering the whole element

Hello friends today we gonna learn about How to Overlay Box-Shadow Effects using CSS. So read this article, How to Overlay Box-Shadow Effects using CSS step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to Overlay Box-Shadow Effects using CSS

Content overlays are a prominent part of modern web design. They help you hide an element on a web page, and later – with the user’s consent – reveal it, and display additional information or controls, such as buttons behind it.

A typical overlay is semi-transparent, right away solid background color (usually black), and there is some text or buttons on it so users can see or interact with them. After the interaction (click or hover) takes place, the overlay becomes is removed and reveals its contents underneath.

In this article we’ll take a look at it how to add colored overlay to images by using pure CSS. You can see the … final result on the demo below. Move the images to show the overlays the Pokemons. While this post discusses images, the technique it presents can be safely applied to other content types as well (such as text blocks).

See the Pen Colored Overlay with Box-Shadow by Preethi (@rpsthecoder) on CodePen.

back to menu ↑

Do not add additional HTML elements

Overlays are often created by placing an extra HTML element with an Opacity value of less than 1 directly above the element to be coveredThe problem is that this technique involves using an extra element (or pseudo-element) for the overlay.

If you’re not a pedant about HTML format, having an extra overlay element probably won’t be a problem, as it probably won’t take that much of a load on a network’s bandwidth. However, having separate style rules for elements and their overlays still hurts the readability and maintainability of CSS.

To keep your code in order, and not to ruin your HTML overview up, it is a better choice to use a CSS solution.

back to menu ↑

Create an overlay with box shadow

So how can you actually create an overlay using only CSS? Using the box-shadow CSS property. The box shadow is perfect for this job, because what is an overlay a dark shadow over an element

The box shadow has a property value called inset, which makes the shadow appear inside of the frame of the box

An inset box shadow with a shadow size of half or more than half the width and height of the element creates a shadow that includes the whole element

.box {width: 200px; height: 200px; box-shadow: green 0 0 0 100px bet;}

Box shade that covers the entire element

Because overlays usually have some transparency, you also need to add it to the box shadow. This can be done by the rgba () shadow color function

The rgb portion of rgba represents red, green, and blue color channel values, while a represents the alpha channel, that is responsible for transparency

For the alpha channel, a value of 1 creates one opaque color, while 0 a completely transparent color

By assigning a value between 0 and 1 to the alpha channel of the rgba color value of the box shadow, you can create a semi-transparent overlay

back to menu ↑

Create the code for the demo

Our demo shows the images and names of various Pokemon. Here we just create the code for Bulbasaur, the first Pokemon in the demo, since the others are made the same way (on Codepen you can see the code for them too).

HTML

For the HTML we only need make a box to which we will add everything else with CSS.

C.S.S

In the CSS below, the .pokemon elements represent the pokemon images, and the .pokemon :: after pseudo elements bear the name of the pokemon.

Since the box-shadow property can take multiple values to render multiple shadows, in addition to the overlay shadow, I’ve also added other shades of gray to the .pokemon and .pokemon: hover elements for aesthetics.

/ * pokemon images * /. pokemon {width: 200px; height: 200px;

/ * center content using flex box * / display: flex; justify-content: center; align items: center;

/ * overlay * / box-shadow: 0 0 0 100px stake, 0 0 5px gray;

/ * hover-out transition * / transition: box-shadow 1s;}

/ * pokemon names * /. pokemon :: na {width: 80%; height: 80%; display: block; font: 16pt ‘bookman old syle’; colour White; border: 2px solid; text-align: center;

/ * center content using flex box * / display: flex; justify-content: center; align items: center;

/ * hover out transition * / transition: opacity 1s .5s;}

/ * reveal pokemon image on hover * /. pokemon: hover {transition: box-shadow 1s; box-shadow: 0 0 0 5px bet, 0 0 5px gray, 0 0 10px gray bet;}

/ * hide Pokemon name on hover * /. pokemon: hover :: na {transition: opacity .5s; opacity: 0;}

When the .pokemon elements float, their box shadow must change to reveal the image behind it.

You can see the .pokemon: hover selector gets a new box shadow that removes the overlay, and the .pokemon: hover :: after selector hides the name of the Pokemon using the opacity property.

You may also have it absence of color values in the overlay box shadows in the .pokemon and .pokemon: hover style lines. The color of the overlay box shadow of the individual Pokemons must be specified in their own separate style rules, because they are all different from each other.

As a box shade has no ownership, you cannot set the shadow color individually with something like box-shadow-color; instead, we use the color property.

When you specify a value for the color property, that value is default applied for the border, outline and box shadow colors also. So you can easily use the color property to add color to box-shadow.

#bulbasaur {background image: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * color value used for box shadow color * / color: rgba (71, 121, 94, 0.9);}

#bulbasaur :: after {/ * Pokemon name * / content: ‘Bulbasaur’;}

The color of the overlay shadow uses the aforementioned rgba () function with 0.9 as the alpha value to make the overlay transparent.

Aside from the overlay box shadow color, the above CSS also adds the rules that are individual for each Pokemon – the background image and the name.

And that’s it, we’re done with our CSS-only colored image overlay. Check out the code of all Pokemons in the pen below.

See the Pen Colored Overlay with Box-Shadow by Preethi (@rpsthecoder) on CodePen.

back to menu ↑

How to Overlay Box-Shadow Effects using CSS: benefits

  • The How to Overlay Box-Shadow Effects using CSS tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to Overlay Box-Shadow Effects using CSS guide is free.

back to menu ↑

Faq

Tutorial summary of How to Overlay Box-Shadow Effects using CSS

In this guide, we told you about the How to Overlay Box-Shadow Effects using CSS; please read all steps so that you understand How to Overlay Box-Shadow Effects using CSS in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to Overlay Box-Shadow Effects using CSS, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to Overlay Box-Shadow Effects using CSS tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide How to Overlay Box-Shadow Effects using CSS. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to Overlay Box-Shadow Effects using CSS, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to Overlay Box-Shadow Effects using CSS”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to Overlay Box-Shadow Effects using CSS, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo