Darkening an Image with CSS (In Any Shape)

Darkening an image with CSS (In any shape)

You could always change the opacity of the image, given the difficulty of any alternatives this might be the best approach.

CSS:

.tinted { opacity: 0.8; }

If you're interested in better browser compatability, I suggest reading this:

http://css-tricks.com/css-transparency-settings-for-all-broswers/

If you're determined enough you can get this working as far back as IE7 (who knew!)

Note: As JGonzalezD points out below, this only actually darkens the image if the background colour is generally darker than the image itself. Although this technique may still be useful if you don't specifically want to darken the image, but instead want to highlight it on hover/focus/other state for whatever reason.

Darkening CSS background image without darkening the area under transparent card-panel

depends on how the position and the shape of card you usually can. What I should do is:
-- create a pseudo element for the HTML element having the background image

-- stretch the pseudo element out to fit the whole area of the parent element

-- make sure that the pseudo element stay under the parent content (the card) in your case

-- Make the pseudo element look darker by adding a background to it, using linear-gradient.

By using linear-gradient, you can control which part of the background image look darker than the other part, the part which you don't want to look darker should have linear-gradient value as transparent. This technique will work fine most of the time for normal shape/position however, it has its own limit. I leave it for you to research how to use them.

In case you are not used to these terms and techniques, I put a few links below:

Pseudo element:
https://www.w3schools.com/css/css3_gradients.asp

Linear Gradient as background:
https://www.w3schools.com/css/css3_gradients.asp

Darken background image on hover

How about this, using an overlay?

.image:hover > .overlay {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#000;
    opacity:0.5;
    border-radius:30px;
}

Demo

Darken background images with partial transparency using CSS/Javascript

What about this:

For each sprite, have only one other image that is completely black, but in the same shape as the original. A silhouette, if you will. Then, make a container div, like so:

<div class="silhouette">
    <div class="sprite"></div>
</div>

Then, you can alter the opacity of the div.sprite element and achieve the effect you want. I understand this doesn't truly solve the problem, but I don't know of another way short of using PHP, which doesn't even solve the problem in full either.

Making image darker with background-color

Change your HTML code to this:

<div class="image">
    <img src="..." />
    <div class="darker"></div>
</div>

And use CSS to position the .darker div over the image. Then you can use opacity to "make it darker":

.image { position: relative; }
.darker { position: absolute; top: 0px; left: 0px; background-color: #000; opacity: 0.5; width: 100%; height: 100% }

How to darken a CSS background image?

#home {
   background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg');
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
}

This should work

Darken the image and place a half triangle on hover

You can also use a pseudo element method, but to begin with and not to confuse, I have used an additional element which will be the arrow. Code explanation in comments

To understand how the arrow was created, you need to see this demo first: How CSS triangles work

.image {  width: 250px;  height: 200px;  background: black;  position: relative;  overflow: hidden;}.image img {  transition: all ease 1s;}.image:hover img { /* Darkening effect on mouseover */  background: black;  opacity: 0.7;}.image .arrow { /* Creates a half triangle with top and left arrow transparent */  opacity: 0;  border-color: transparent #f2f2f2 #f2f2f2 transparent;  transition: all ease 1s;  position: relative;}.image:hover .arrow { /* Mouseover effect */  opacity: 1;  font-family: Roboto;  font-size: 36px;  text-align: center;  border-image: none;  border-style: solid;  border-width: 45px;  position: absolute;  bottom: 0;  font-weight: normal;  width: 0;  height: 0;  right: 0;}

.image:hover .arrow {    border-image: none;    border-style: solid;    border-width: 45px;    bottom: 0;    display: block;    font-family: Roboto;    font-size: 36px;    font-weight: normal;    height: 0;    opacity: 1;    position: absolute;    right: 0;    text-align: center;    width: 0;}.image .arrow {    border-color: transparent #f2f2f2 #f2f2f2 transparent;    opacity: 0;    position: relative;    transition: all 1s ease 0s;}
.image .arrow span {    left: 5px;    position: relative;    top: -10px;}

<div class="image">  <img src="http://lorempixel.com/250/200/sports" />  <div class="arrow"><span>></span></div></div>

How to darken an image on mouseover?

Or, similar to erikkallen's idea, make the background of the A tag black, and make the image semitransparent on mouseover. That way you won't have to create additional divs.

• CSS Only Fiddle (will only work in modern browsers)
• JavaScript based Fiddle (will [probably] work in all common browsers)

---

Source for the CSS-based solution:

a.darken {
    display: inline-block;
    background: black;
    padding: 0;
}

a.darken img {
    display: block;

    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

a.darken:hover img {
    opacity: 0.7;

}

And the image:

<a href="http://google.com" class="darken">
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
</a>

---

Related Topics