How to CSS-Only Overlays Effect with Box-Shadow

Content overlays are a distinguished partial of complicated web design. They assistance we hide an element on a web page, and after – with a user’s capitulation – reveal it, and arrangement additional information or controls, such as buttons behind it.

A standard conceal is semi-transparent, with a solid credentials color (usually black), and there’s some calm or buttons on it for users to see or correlate with. After a communication (clicking or hovering) occurs, a conceal gets private and reveals a content underneath it.

18 Amazing Effects You can Create with CSS3 Box Shadows

 

18 Amazing Effects You can Create with CSS3 Box Shadows

We can do a lot of things with CSS like build modals, make pleasing calm effects, pull a…Read more

In this article, we’ll have a demeanour during how to add colored conceal to images by regulating pristine CSS. You can see a final outcome on a demo below. Hover a images to make a overlays exhibit a pokemons. Although this post discusses images, a technique it presents can be safely practical to other calm forms (such as calm blocks) as well.

 

Avoid Adding Extra HTML Elements

Overlays are frequently combined by positioning an additional HTML element with an opacity value reduction than 1 right above a component to be covered. The problem is that this technique involves a use of an extra component (or pseudo-element) for a overlay.

If we aren’t an HTML distance pedantic, carrying an additional component for conceal is substantially not a large deal, as many expected it won’t taxation a bandwidth of any network that much. However carrying separate character manners for elements their overlays still harms CSS readability and maintainability.

To keep your formula in order, and not to disaster your HTML outline up, it’s a improved choice to use a CSS-only solution.

How to Optimize CSS with Code Style Guides

 

How to Optimize CSS with Code Style Guides

Editor’s note: This essay is partial of a Code Optimization series, where we take a demeanour during how…Read more

Create Overlay with box-shadow

So how can we indeed emanate a CSS-only overlay? With a assistance of a box-shadow CSS property. The box-shadow is ideal for this job, given what is an conceal though a dim shade expel over an element?

The box-shadow has a skill value called inset, that causes a shade to seem inwards of a support of a box.

An inset box-shadow with a shade distance half or some-more than half of a breadth and tallness of a element, creates a shade that covers a entire element.

.box {
width: 200px;
height: 200px;
box-shadow:  immature 0 0 0 100px inset;
}
Box Shadow Covering Entire Element

Box shade covering a whole element

Since overlays customarily have some transparency, we need to supplement it to a box shade as well. This can be finished by regulating a rgba() duty for shade color.

The rgb apportionment of rgba, represents, red, immature and blue tone channel values, while a represents a alpha channel, that is responsible for transparency.

For a alpha channel, a value of 1 creates an opaque color, while 0 creates a fully pure color.

By assigning a value between 0 and 1 to a alpha channel of a rgba tone value of a box shadow, we can create a semi-transparent overlay.

18 Amazing Effects You can Create with CSS3 Box Shadows

 

18 Amazing Effects You can Create with CSS3 Box Shadows

We can do a lot of things with CSS like build modals, make pleasing calm effects, pull a…Read more

Create a Code for a Demo

Our demo will uncover a images and names of opposite pokemons. Here we’ll usually emanate a formula for Bulbasaur, a initial pokemon in a demo, as a others are done a same approach (on Codepen we can check out a formula for them as well).

HTML

For a HTML, we usually need to create a box to that we’ll supplement all else with CSS.

div id="bulbasaur" class="pokemon"/div
CSS

In a CSS below, a .pokemon elements arrangement a pokemon images, and a .pokemon::after pseudo-elements lift a name of a pokemon.

Since a box-shadow skill can take mixed values in sequence to render mixed shadows, besides a conceal shadow, we also combined other shadows of grey to a .pokemon and .pokemon:hover elements for aesthetics.

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

  /* core calm regulating flex box */
  display: flex;
  justify-content: center;
  align-items: center;

  /* conceal */
  box-shadow: 0 0 0 100px inset,
      0 0 5px grey;

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

/* pokemon names */
.pokemon::after {
  width: 80%;
  height: 80%;
  display: block;
  font:  16pt 'bookman aged syle' ;
  color: white;
  border: 2px solid;
  text-align: center;

  /* core calm regulating flex box */
  display: flex;
  justify-content: center;
  align-items: center;

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

/* exhibit pokemon design on float */
.pokemon:hover {
  transition: box-shadow 1s;
  box-shadow: 0 0 0 5px inset,
  0 0 5px grey,
  0 0 10px grey inset;
}

/* censor pokemon name on float */
.pokemon:hover::after {
  transition: opacity .5s;
  opacity: 0;
}

When a .pokemon elements are hovered, their box-shadow need to change to exhibit a picture behind.

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

You competence have also beheld a absence of tone values in a conceal box-shadows in a .pokemon and .pokemon:hover character rules. The conceal box-shadow tone of a particular pokemons need to be specified in their possess seperate character rules, as they’re all opposite from any other.

As box-shadow doesn’t have any longhand property, we can’t set a shade tone individually with something like, box-shadow-color; instead – we use a color property.

By default, when we give a value for a color property, that value is applied for a border, a outline and a box-shadow colors as well. So, we can simply use a color skill to supplement tone to box-shadow.

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

#bulbasaur::after{
  /* pokemon name */
  content: 'Bulbasaur';
}

The tone of a conceal shade uses a aforementioned rgba() duty with 0.9 for alpha value to make a conceal transparent.

Apart from a tone of a conceal box-shadow, a above CSS also adds a manners that are particular to any pokemon – a picture as background-image and a name.

And that’s all, we’re prepared with a CSS-only colored picture overlay. Have a demeanour during a formula of all pokemons in a coop below.

Add Comment