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.
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.
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
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). For the HTML we only need make a box to which we will add everything else with CSS.
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.
How to Overlay Box-Shadow Effects using CSS: benefits
Faq
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.
;){kind=link}