You might have also noticed the absence of color values in the overlay box-shadows in the. pokemon:hover::after selector hides the name of the pokemon by using the opacity property. pokemon:hover selector gets a new box-shadow that removes the overlay, and the. pokemon elements are hovered, their box-shadow need to change to reveal the image behind. Since the box-shadow property can take multiple values in order to render multiple shadows, besides the overlay shadow, I also added other shadows of grey to the. pokemon::after pseudo-elements carry the name of the pokemon. pokemon elements display the pokemon images, and the. HTMLįor the HTML, we only need to create a box to which we’ll add everything else with CSS.
#Css color overlay background image code
Here we’ll only create the code for Bulbasaur, the first pokemon in the demo, as the others are made the same way (on Codepen you can check out the code for them as well). Our demo will show the images and names of different pokemons. Read Also: 18 Amazing Effects You can Create with CSS3 Box Shadows Create the Code for the Demo The rgb portion of rgba, represents, red, green and blue color channel values, while a represents the alpha channel, which is responsible for transparency.įor the alpha channel, a value of 1 creates an opaque color, while 0 creates a fully transparent color.īy 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.
This can be done by using the rgba() function for shadow color. Since overlays usually have some transparency, you need to add it to the box shadow as well. The box-shadow has a property value called inset, which causes the shadow to appear inwards of the frame of the box.Īn inset box-shadow with a shadow size half or more than half of the width and height of the element, creates a shadow that covers the entire element. The box-shadow is perfect for this job, since what is an overlay but a dark shadow cast over an element?
So how can you actually create a CSS-only overlay? With the help of the box-shadow CSS property.
#Css color overlay background image how to
Read Also: How to Optimize CSS with Code Style Guides Create Overlay with box-shadow To keep your code in order, and not to mess your HTML outline up, it’s a better choice to use a CSS-only solution. However having separate style rules for elements & their overlays still harms CSS readability and maintainability. If you aren’t an HTML size pedantic, having an extra element for overlay is probably not a big deal, as most likely it won’t tax the bandwidth of any network that much. The problem is that this technique involves the usage of an extra element (or pseudo-element) for the overlay. Overlays are frequently created by positioning an extra HTML element with an opacity value less than 1 right above the element to be covered. See the Pen Colored Overlay Using Box-Shadow by Preethi on CodePen. Read Also: 18 Amazing Effects You can Create with CSS3 Box Shadows Although this post discusses images, the technique it presents can be safely applied to other content types (such as text blocks) as well.
Hover the images to make the overlays reveal the pokemons. You can see the final result on the demo below. In this article, we’ll have a look at how to add colored overlay to images by using pure CSS. After the interaction (clicking or hovering) occurs, the overlay gets removed and reveals the content beneath it. They help you hide an element on a web page, and later – with the user’s approval – reveal it, and display extra information or controls, such as buttons behind it.Ī typical overlay is semi-transparent, with a solid background color (usually black), and there’s some text or buttons on it for users to see or interact with. But my main intension to provide a direction if someone is interested with this.Content overlays are a prominent part of modern web design. I included all three approaches in the below demo. I also have other two approaches, one using inverse clipping technique and the other using border segments technique. More or less I do also have a similar approach to build the border dynamically using Path (including corner radius).
0 kommentar(er)
