I would like to use mix-blend-mode:darken on the image of the pineapple so that it will have a blue overlay and the darkened image on hover. The trouble is that I have an absolute positioned div on top of the image. I tried applying the blue background to the absolute positioned .overlay div and applying the blend mode to that as well as wrapping the image in a div and applying the blend mode to that div but because the overlay is positioned on top, the hover does not apply the darken style. Any help would be greatly appreciated, and please let me know if my details aren't clear. I added how I would like the image to display on hover in a second div #result. Is it possible to do this with just CSS?

<style>
.container {
  width: 300px;
  position: static;
}

.darken img:hover {
  mix-blend-mode: darken;
  background-color: #007bff;
}

.overlay {
    position: absolute;
    top: 7px;
    bottom: 0;
    left: 7px;
    right: 0;
    height: 300px;
    width: 300px;
    opacity: 0;
    transition: .5s ease;
    background-color: #007bff;
    cursor: pointer;
}

.overlay:hover {
    opacity: .8;
}

.text {
    color: #fff;
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    text-align: center;

}

#result {

  width: 300px;
  position: relative;
  background-color: #007bff;
}

#result img:hover {
  mix-blend-mode: darken;
  
}

</style>

<div >
  <div >
    <img src="https://www.w3schools.com/cssref/pineapple.jpg" alt="Pineapple" width="300" height="300">
  </div>
    <div >
     <span >Click Here</span>
    </div>
</div>

<p>Below is how I would like the image to display on hover but with the text on top:</p>
<div id="result">
<img src="https://www.w3schools.com/cssref/pineapple.jpg" alt="Pineapple" width="300" height="300">
</div>

CodePudding user response：

::after

In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

You could use an ::after element.

This would allow you to use the same #result example you provided, and achieve the effect very simply.

.result {
  width: 300px;
  position: relative;
  background-color: #007bff;
  cursor: pointer;
}

.result img {
  display: block;
}

.result:hover img {
  mix-blend-mode: darken;
}

.result:hover::after {
  content: attr(data-message);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  color: white;
  font-weight: bold;
}

<div  data-message="New Text!">
  <img src="https://www.w3schools.com/cssref/pineapple.jpg" alt="Pineapple"   width="300" height="300">
</div>

<div  data-message="Something else!">
  <img src="https://www.w3schools.com/cssref/pineapple.jpg" alt="Pineapple"   width="300" height="300">
</div>

<div  data-message="click here!">
  <img src="https://www.w3schools.com/cssref/pineapple.jpg" alt="Pineapple"   width="300" height="300">
</div>

CodePudding user response：

Use another element for the blue overlay. Below I am relying on the container pseudo element.

.container {
  width: 300px;
  position: relative;
  cursor: pointer;
  z-index: 0;
}
.container img {
  width: 100%;
  display: grid;
}
/* common styles to the text overlay and color overlay */
.container:before,
.overlay{
  content:"";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: .5s ease;
}
/* color overlay */
.container:before {
  background-color: #007bff;
  mix-blend-mode: darken;
}
/* text overlay */
.overlay {
  display: grid;
  place-content: center;
}
.text {
  color: #fff;
  font-size: 18px;
}
/* make both visible on hover */
.container:hover .overlay,
.container:hover:before {
  opacity: .8;
}

<div >
  <img src="https://www.w3schools.com/cssref/pineapple.jpg" alt="Pineapple" width="300" height="300">
  <div >
    <span >Click Here</span>
  </div>
</div>

CodePudding user response：

I needed to be able to edit the "click here" text for multiple boxes, so I went with this approach.

.container {
  width: 300px;
  position: relative;
  overflow: hidden;
  height: 300px;
}

.overlay {
       position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      z-index: 10;
      cursor:pointer;
}


      .text {
          color: white;
          font-size: 18px;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          text-align: center;
          padding-top: 2.5rem;
          mixed-blending-mode: initial;
        }
        
.overlay:hover {
        opacity: 1;
    }
    
    .overlay:hover   img {
        mix-blend-mode: multiply;
        transform: scale(1.2); 
        transition: .3s;
}

.darken {
 background-color: #007BFF;
}

<div >
  <div >
      <div >
         <span >Click Here</span>
      </div>
      <img  src="https://www.w3schools.com/cssref/pineapple.jpg" style="width:100%">
  </div>
</div>