How to add a white layer (overlay ) over images

Question

I want add a white layer over my active image like this

https://github.com/front-end-mentor-works/e-com-product-page/blob/main/design/desktop-design-lightbox.jpg

i tried with css filter property

filter:opacity(0.3);

but it looks like image is disable instead of active image

https://github.com/front-end-mentor-works/e-com-product-page/blob/main/e/active-white-layer.jpg

i have tried some other solutions also including

opacity:0.2
using psuedo class after with background from this stack overflow post link

White overlay over an image

but all these give a disabled appearance like above than active in the design tried box shadow solution from some other similar stack overflow questions

.lbcontent {
  width: 80%;
  border-radius: 8px;
  border: 2px solid $Orange;
  background: #fff;
}

.lbcontent-active {
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2);
}

.lbcontent img {
  width: 100%;
  border-radius: 2rem;
}

.lbcontent .cart-thumbnail-box {
  display: flex;
  width: 22%;
  margin: 3rem 4rem 0;
  gap: 22%;
}

<div class="light-box">
  <div id="lboverlay"></div>
  <div id="lbpopup">
    <div class="lbcontrols">
      <!-- <span id="lbclose">X</span> -->
      <img id="lbclose" src="./images/icon-close.svg" alt="close icon" srcset="" />
    </div>
    <div class="lbcontent">
      <img src="./images/image-product-1.jpg" alt="product1 light-box image" />
      <div class="cart-thumbnail-box">
        <img class="cart-thumbnail cart-thumbnail-active" src="./images/image-product-1-thumbnail.jpg" alt="product-1-image" />
        <img class="cart-thumbnail" src="./images/image-product-2-thumbnail.jpg" alt="product-2-image" />
        <img class="cart-thumbnail" src="./images/image-product-3-thumbnail.jpg" alt="product-3-image" />
        <img class="cart-thumbnail" src="./images/image-product-4-thumbnail.jpg" alt="product-4-image" />
      </div>
    </div>
  </div>

by setting opacity below 1 you are making your image semi transparent — Mohammed, Nov 13 '22 at 17:43
Well, if you reckon the image in the first link looks disabled, instead of selected, then consider simply reversing your scheme. I.E - Apply a transparent layer over all thumbnails except the active one — enhzflep, Nov 14 '22 at 17:59
@enhzflep i want's to acheive https://github.com/front-end-mentor-works/e-com-product-page/blob/main/design/desktop-design-lightbox.jpg this design if i tried otherway around it didnot calculate as completion this is my design iam reducing the opacity to 0.3 to apply a white layer but it is not working https://github.com/front-end-mentor-works/e-com-product-page/blob/main/e/active-white-layer.jpg — sinan, Nov 16 '22 at 05:01
@sinan - the thumb in 2nd image is clearly transparent, while the first one is not. You need to create a new element (i.e a div or a span) then position it so it occupies the same screen-coords as the thumbnail. Then you z-index it so its in-front of the image, then you set it's colour and opacity. Currently, your question is of low-quality, since it doesn't contain any html. Showing us the css for unknown HTML doesn't exactly help. Answers I wrote years ago deal with positioning elements in front of other elements also setting opacity &/or mouse event handling. Good luck. — enhzflep, Nov 16 '22 at 05:39
@enhzflep i have edited my question to add my html part also — sinan, Nov 16 '22 at 06:10

Nick Vu · Accepted Answer · 2022-11-16T07:00:50.437

You can use a pseudo-element style as an overlay on your image.

Side note: to use ::after or ::before, we have to wrap your image into picture elements. We cannot use pseudo-elements on self-closed tags.

.lbcontent .cart-thumbnail-box .cart-thumbnail {
  position: relative;
  display: block;
}

.lbcontent .cart-thumbnail-box .cart-thumbnail img {
  width: 100%;
  height: 100%;
}

.lbcontent .cart-thumbnail-box .cart-thumbnail.cart-thumbnail-active::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.5);
}

<div class="lbcontent">
  <div class="cart-thumbnail-box">
    <picture class="cart-thumbnail cart-thumbnail-active">
      <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="product-1-image" />
    </picture>
  </div>
</div>

Thanks. I hadnot idea about psuedo elements relation with selft closed tags — sinan, Nov 16 '22 at 16:21

How to add a white layer (overlay ) over images

1 Answers1