Html Question posted in
Some basic documentation can be found here.

Html – How to make those "dark glows" over photos in css?

I’m currently writing a new website, but I have one little problem. I’m coding slideshow header and I would like to make photos darker in order to make the text more visible. I know I could just edit photos, but there is such option in CSS I guess. I remember when once I was making a site in WordPress Elementor and there were such option for slideshow, unfortunatelly I don’t remember how this option is called, it was long time ago and now I don’t use any CMSes.

Well, I don’t know how it’s called and I can’t find anything online. I think it would be possible to just create a div container, create a half-transparent box and place it before my slides, but I’m not sure if there are some other options to get this effect.

I want to get similar effect as it is at this site pictures: link, but on the slideshow. As you see, the background is a bit darker in order to make text look better. If anyone wants to ask, this is the website of the law firm of some controversial Polish politician, I don’t say I support him, that’s just the first site with this effect I could find fast. 🙂

I would be really grateful for help.

Tags:

2

Answers


  1. 0

    You can do this using a linear gradient on top of your image. Linear gradients are regions of color that change gradually, in this case from transparent to black. You can use this site to generate them more easily.

    Working example below. Please note that the effect is done with three layers. The first one being the image, the second one the gradient and the third one at the end being the text. Its not required to do it with divs, you can also do it with pseudoelements but for simplicity and because its easier to understand I did it with divs for the demonstration

    .container {
  position: relative;
  width: min-content;
}

.gradient-container {
  position: absolute;
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,206,255,0) 100%);
  inset: 0;
}

.text-container {
  position: absolute;
  bottom: 0;
  padding: 1rem;
  color: white;
  font-weight: bold;
}
    <div class="container">
  <img src="https://placecats.com/300/200" />
  <div class="gradient-container"></div>
  <div class="text-container">
    Clearly readable text
  </div>
</div>
    Login or Signup to reply.
  2. 0

    The other option is you can add background color to your Slide show main div.
    Check below example to understand how you can perform it.

    Lets consider your Slide show as below with One image.

    <div className="slideshow">
  <img src="/img/about.jpg" className="slide" alt="Slideshow Image" />
  <div className="text-overlay">
    <h1>Your Header Text</h1>
    <p>Your Subtitle</p>
  </div>
</div>

    Add css as below

    <style>
  /* Slideshow container */
  .slideshow {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  /* Slideshow image */
  .slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  /* Dark overlay */
  .slideshow::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Adjust opacity to your preference */
    z-index: 1;
  }

  /* Text over image */
  .text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    z-index: 2; /* Above overlay */
    text-align: center;
  }
</style>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search