Darken a Background Image Without Affecting the Text

Darken a background image without affecting the Text

This can easily be solved by ordering the stacking order of your elements correctly. Note the use of relative positioning on the text content.

.block {

  display: inline-block;

  color: #fff;

  position: relative;

  width: 200px;

  height: 200px;

  padding: 10px;

}

.block:before {

  content: "";

  display: block;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background: rgba(0, 0, 0, 0.5);

  transition: all .2s linear;

}

.block:hover:before {

  background: none;

}

.block h2,

.block p {

  position: relative;

}

<a class="block" style="background-image:url(http://cdn.impressivewebs.com/2011-11/greece001.jpg);" href="#">

  <h2>Dogs are great sleepers</h2>

  <p>Mine can sleep all day long</p>

</a>

<a class="block" style="background-image:url(http://cdn.impressivewebs.com/2011-11/greece001.jpg);" href="#">

  <h2>Dogs are great sleepers</h2>

  <p>Mine can sleep all day long</p>

</a>

Darken background on hover but not text

With your existing markup, you could transition a pseudo element instead, either using a solid background and toggling the opacity from 0 (hidden) to .5 (50%), or just use rgba(0,0,0,0.5) and toggle opacity from 0 to 1. Then give the span a z-index so it shows up on top.

html {

  box-sizing: border-box;

}

body {

  font-family: monospace;

  padding: 0;

  margin: 0;

  background: black;

}

*,

*:before,

*:after {

  box-sizing: inherit;

}

.grid {

  width: 100%;

  margin: 0 auto;

}

.grid:before,

.grid:after,

.row:before,

.row:after {

  content: " ";

  display: table;

}

.grid:after,

.row:after {

  clear: both;

}

[class*='col-'] {

  width: 100%;

  float: left;

  min-height: 1px;

}

.col {

  padding: 1em;

  margin: 1px;

  box-shadow: 0 1px 1px rgba(0, 0, 0, .3);

  min-height: 200px;

  height: inherit;

}

#one,

#two,

#three,

#four,

#five,

#six {

  font-size: 18px;

  font-weight: bold;

  color: yellow;

  text-shadow: 2px 2px 8px black;

  display: flex;

  justify-content: center;

  align-items: center;

}

.col:after {

  background: rgba(0, 0, 0, 0.5);

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  content: '';

  opacity: 0;

  -webkit-transition: opacity .5s ease;

  -moz-transition: opacity .5s ease;

  -o-transition: opacity .5s ease;

  -ms-transition: opacity .5s ease;

  transition: opacity .5s ease;

}

.col:hover:after {

  opacity: 1;

}

.col span {

  position: relative;

  z-index: 1;

}

@media screen and (min-width:1024px) {

  .col-md-4 {

    width: 33.33333%;

    height: 473.5px;

  }

}

#one {

  background-image: url("http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg");

}

<div class="grid">

  <div class="row">

    <div class="col-md-4">

      <div class="col" id="one"><span>Programming</span></div>

    </div>

  </div>

</div>

How to darken an image in html (not css)

Use filter:

.darken {

  filter: brightness(0.4);

}

<img src="https://picsum.photos/id/1/200/300">

<img src="https://picsum.photos/id/1/200/300" class="darken">

<img src="https://picsum.photos/id/1/200/300" style="filter: brightness(0.2);">

How to darken a background using CSS?

Just add this code to your image css

 body{
 background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),
        /* bottom, image */
        url(https://images.unsplash.com/photo-1614030424754-24d0eebd46b2);
    }

Apply opacity to background image but not text

opacity is not an inherit property but affect the content so when you increase the opacity of .image that also affects to .text, you can use pseudo elements and background: rgba() to achieve what you want like this:

Here a working JSFiddle to play with

.wrap {

    width: 100%;

}

.image {

    background-image: url("https://i.stack.imgur.com/gijdH.jpg?s=328&g=1");

    position: relative;

    height: 100vh;

}

.image:before{

    content: '';

    position: absolute;

    top: 0;

    right: 0;

    left: 0;

    bottom: 0;

    background: rgba(0,0,0,0.7);

}

.text {

    color: #FFF;

    position: relative;

}

<div class="wrap">

    <div class="image">

        <div class="text">

            <p>I LOVE YOU</p>

        </div>

    </div>

</div>

CSS Darken on Hover without Changing Text Color

Instead of using filter: Brightness(), I prefer to use filter: Saturate().
It gives object darken background but doesn't affect your text.

.badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: white;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  text-decoration: none;
}
/* .badge:hover {filter: brightness(0.8);} */
.badge:hover {filter: saturate(0.5);}
.badge > span {color: white;}

<a href="#" class="badge" style="background-color: #0072CE;"><span>Some Text</span></a>

CSS background image make darker

I would go for photoshop to blur the background or give it an overlay. However you can try giving it a linear gradient on your top-container class before the url call on the background-image as so:

background: linear-gradient( rgba(0,0,0,0.5), rgba(0, 0, 0, 0.5) ),url(../images/background1.jpg) no-repeat center center fixed;

just change the rgba value to what you need. Hope this helps.

---

Related Topics