How to connect transition to ::before psuedo-element on hover?-CodePudding

I created a div that contains a background image which upon hovering an orange tint shows up over it. I used ::before psuedo-element to accomplish this. However I want the hover to be smooth so I used transition. It doesn't work, unfortunaelty. I've no idea why. I thought you guys could help.

.img{
  color: white;
  height: 400px;
  background-image: url("https://watermark.lovepik.com/photo/20211203/large/lovepik-serious-businessman-picture_501473287.jpg");
  width: 100%;
  background-size: cover;
  background-position: top 35% right 0;
  position: relative;
  float: left;
  transition: all 5s;
}

.img:hover::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 88, 0, 0.7);
}

<div ></div>
<h4>Jon Doe</h4>
<p>Web Developer</p>

CodePudding user response：

You need to add transition to the ::before pseudo-element. Also, add the content property before it goes into the hover state.

.img::before {
  content: "";
  transition: all 5s;
}

CodePudding user response：

I found the solution here: CSS3 Transition on pseudo element (::before) does not work

The problem is that the pseudo-element doesn't exist when the container isn't being hovered

So I've added the .img::before part and moved the transition from .img to the .img:hover::before and it's working.

.img{
  color: white;
  height: 400px;
  background-image: url("https://watermark.lovepik.com/photo/20211203/large/lovepik-serious-businessman-picture_501473287.jpg");
  width: 100%;
  background-size: cover;
  background-position: top 35% right 0;
  position: relative;
  float: left;
}

.img::before{
  content: "";
}

.img:hover::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 88, 0, 0.7);
  transition: all 5s;
}