0

HTML

<div class="row Home">
      
      <div
        class="col right"
        style="background-image: url('./Images/car-2797169_1280.jpg')"
      >
        <div class="elementsOverlay d-flex justify-content-center align-items-center">
          <div class="d-flex flex-column-reverse">
            <div class="ps-4 mt-4">
              <button type="button" class="btn bookNow">Book Now</button>
            </div>
    
            <div class="ps-4 pt-5 pe-2">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
              gravida nisl eget massa commodo, condimentum pharetra purus malesuada.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
              convallis id dolor nec dictum. Sed mollis scelerisque condimentum.
              Quisque viverra nisl vel diam hendrerit vestibulum. Cras augue ligula,
              consectetur eu eleifend a, viverra cursus dolor. Fusce gravida et
              lectus ut mollis. Donec pulvinar felis finibus mauris pretium
              efficitur. Donec in dui condimentum nunc tempus ultricies
            </div>
          </div>
        </div>
    </div>`

CSS

.right {
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
  opacity: 0.5;
  position: relative;
  color: white;
  text-shadow: 2px 2px 2px rgb(47, 45, 45);
}

.elementsOverlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}

I have tried using the methods on other stack overflow questions on this by using argb to set the opacity but it has no effect on the site.

.elementsOverlay { background-color: rgba(0, 0, 0, 0.6) !important; }

Thank you in advance!

jayo
  • 21
  • 4

1 Answers1

-1

Try backdrop-filter CSS property.

.right {
  backdrop-filter: opacity(50%);
}
Mahdi
  • 1
  • 2