Getting Overlay + Darker Overlay On Hover For List Item Images With CSS

Question

Trying to recreate an overlay / overlay + hover effect.

In the code that works for the effect that I used earlier, the parent div gets the class thumbnail-row with the styles:

.thumbnail-row {
 display: flex;
 margin-top: 40px;
 box-shadow: 0px 0px 0px 4000px rgba(27, 61, 88, 0.5) inset;
}

.thumbnail-row div::after {
 position: relative;
 top: 0; left: 0; 
 width: 100%;
 height: 100%;   
 box-shadow: 0px 0px 0px 4000px rgba(27, 61, 88, 0.5) inset;
}

Applying that same technique to this code:

HTML:



Portfolio
Responsive websites for a wide variety of clients

CSS:

.list-overlay {
box-shadow: 0px 0px 0px 4000px rgba(27, 61, 88, 0.5) inset;
z-index:2;
}

.list-overlay::after {
width: 100%;
height: 100%;   
box-shadow: 0px 0px 0px 4000px rgba(27, 61, 88, 0.5) inset;
}

.list-overlay:hover {
visibility: visible;
opacity: 1;
}

gives me the current result (not working).

When I tried to wrap the

's in divs, it caused each image to be on its own row (which I of course don't want).

Also, tried adding z-index: 2; to .list-overlay::after, but the box shadow is still beneath the image. Since I'm using bootstrap for this site, I also tried wrapping all

's in a container, then wrapping three

's in a row at a time and assigning them bootstrap column-widths (col-md-4 col-sm-12), but that didn't work either.

The first step is just to get the box shadow over the images at 50% opacity, then to make that shadow 80% when you hover over it. Since wrapping the

's in divs is throwing off the 3-column layout, is there a way to get a box shadow over an

with the way I have it set up?

Thanks!

I haz kode · Accepted Answer

I am able to create this effect using a combination of the pseudo-element :after and the :hover state.

The effect is as follow:

The pseudo-element :after is hidden by default using opacity: 0 but positioned "on top" of the image. It has a semi-transparent background with the color you specified in the example rgba(27, 61, 88, .9);

When the user triggers the hover state you use :hover you bring the pseudo-element :after into display using opacity: 1

Adding transition: all ease 1s; to the pseudo-element :after makes the transition from opacity: 0 to opacity: 1 happen over the duration of 1 second instead of being instantaneous.

/* Start demonstration backgrounds and alignment fluff */
body {
  background: #131418;
  text-align: center;
  margin: 1em auto;
}

.my-image-parent {
  display: inline-block;
  width: 300px;
  height: 300px;
  line-height: 300px;
  text-align: center;
  font-size: 0;
}

.bg1 {background: url(https://unsplash.it/800/799);}
.bg2 {background: url(https://unsplash.it/799/800)}
.bg3 {background: url(https://unsplash.it/800/799);}
.bg4 {background: url(https://unsplash.it/801/801);}
.bg5 {background: url(https://unsplash.it/802/800);}
.bg6 {background: url(https://unsplash.it/800/802);}

.my-image {
  width: auto;
  height: 100%;
  vertical-align: middle;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
/* End demonstration backgrounds and alignment fluff */


/* Start Essential CSS for the effect */
.my-image {
  position: relative;
}

.my-image:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(27, 61, 88, .9);
  opacity: 0;
  transition: all ease 1s;
}

.my-image:hover:after {
  opacity: 1;
  cursor: pointer;
}
/* End Essential CSS for the effect */

Getting Overlay + Darker Overlay On Hover For List Item Images With CSS

Answers (1)

Related Questions