• 2021-02-01

    Darken image without pseudo element

    Comments

    Start a discussion

    In the demo below I use mix-blend-mode: multiple;.

    HTML

    <figure>
      <img src="https://csspoo.com/images/s.jpg">
    </figure>

    CSS

    figure {
      background-color: #888;
      width: 150px;
      display: flex;
    }
    
    img {
      mix-blend-mode: multiply;
      width: 100%;
    }
    
    img:hover {
      mix-blend-mode: normal;
    }