Question 279034 in CSS Question posted in
Some basic documentation can be found here.

Css – Use mix-blend-mode on the div below the absolute positioned div on hover

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 class="container">
  <div class="darken">
    <img src="https://www.w3schools.com/cssref/pineapple.jpg" alt="Pineapple" width="300" height="300">
  </div>
    <div class="overlay">
     <span class="text">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>
Tags:

3

Answers


  1. 0

    ::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: "Click Here";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  color: white;
  font-weight: bold;
}
    <div id="result">
  <img src="https://www.w3schools.com/cssref/pineapple.jpg" alt="Pineapple"   width="300" height="300">
</div>
    Login or Signup to reply.
  2. 0

    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 class="container">
  <img src="https://www.w3schools.com/cssref/pineapple.jpg" alt="Pineapple" width="300" height="300">
  <div class="overlay">
    <span class="text">Click Here</span>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    Hi dear you can modify your CSS as follows:

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

.darken img {
  transition: .5s ease;
}

.darken .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  background-color: #007bff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  mix-blend-mode: darken;
  transition: .5s ease;
}

.darken:hover .overlay {
  opacity: .8;
}

.text {
  color: #fff;
  font-size: 18px;
  text-align: center;
}

#result {
  width: 300px;
  position: relative;
  background-color: #007bff;
  overflow: hidden;
}

#result img {
  width: 100%;
  height: auto;
  transition: .5s ease;
}

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

    In this solution, the blue overlay and darken blend mode are applied to the .overlay div inside the .darken container. The mix-blend-mode: darken; property is applied to the .overlay itself, and the opacity changes on hover to achieve the effect you desire. The image inside the #result div also has the darken blend mode applied directly on hover.

    Here’s the modified HTML and CSS:

    <div class="container">
  <div class="darken">
    <img src="https://www.w3schools.com/cssref/pineapple.jpg" alt="Pineapple" width="300" height="300">
    <div class="overlay">
      <span class="text">Click Here</span>
    </div>
  </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>

    This will achieve the desired overlay and darken blend mode effect on hover while keeping the text on top of the image.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search