容器 hover 效果 变色文字带背景 hover 效果 css

Question

When I click hover in slide-image so hover effect change but text color have to changed how to text color changed with slide-image hover effect?

.wpcp-slide-image::before {
    content:"";
    position: absolute;
    top:0px;
    left: 0px;
   opacity: 0.7 !important;
    background-color: #ff613c;
    width: 100%;
    height: 0%;
    transition: height 0.15s ease-in;

}

.wpcp-slide-image:hover::before{
    height: 100% !important;
}

enter image description here

Answer 1

you should set the z-index of the image on -1, so the background will be behind the text.

CSS:

.wpcp-slide-image:hover .abc {
  color: white;
}
.wpcp-slide-image::before {
    content:"";
    position: absolute;
    top:0px;
    left: 0px;
   opacity: 0.7 !important;
    background-color: #ff613c;
    width: 100%;
    height: 0%;
    transition: height 0.15s ease-in;
  z-index: -1;

}

.wpcp-slide-image:hover::before{
    height: 100% !important;
}

HTML:

<div class="wpcp-slide-image">
  <div class="abc">abc</div>
</div>