Content property doesn't inherit css classes

I have a problem, I need to add a logo to the image. The logo should show up only on hover. Currently, I have this class that is reacting by darkening on hovering:

.et_pb_video_overlay_hover {
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0);
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

But when I add there content:url(...) it will show up in the class straight away. I tried to do

.et_pb_video_overlay :hover{
    content: url(https://www.aatevr.com/wp-content/uploads/2019/11/te-Aate-VR-healthcare-Virtual-Reality-e1574673050893.png);

}

But then it doesn't inherit the fading in and out beside the size is all over the image and I would need it to be smaller and in the center. Is there any way, that I can move just around the content property to make it easy in and out and scale it down without messing up the previous property?