How to have the image constantly display

[ChrisjChrisj]

I’m modifying an existing script, and this css displays the video’s watermark:

.watermark {
    position: absolute;
    z-index: 10;
    left: 20px;
    top: 20px;
    display: none;
    transition: all 0.5s;
}

however, the watermark disappears and reappears on mouse over, it seems.
I’d like the watermark to remain displayed and never disappear, but have tried changing the css without success.

I’ve commented out the display and the transition, but still the watermark doesn;t stay displayed(visible).
what’s the solution?
any suggestions are appreciated.

[SamA74]

@ChrisjChrisj

I’ve commented out the display and the transition, but still the watermark doesn;t stay displayed(visible).

I would guess there is code elsewhere influencing its display. You should be able to locate that with your browser’s inspect tools.
You could perhaps try changing the display property instead of commenting it out altogether.

@ChrisjChrisj

however, the watermark disappears and reappears on mouse over, it seems.

How is this being done, with CSS (:hover) or javascript?

[PaulOB]

If there is some js writing an inline style on mouseover then you could try using !important in your css (this is one of the few times !important is necessary).

.watermark {
    position: absolute;
    z-index: 10;
    left: 20px;
    top: 20px;
    display: none!important;
    transition: all 0.5s;
}

As @SamA74 said above you should use your devtools first to ascertain where the effect is coming from. Devtools takes a bit of practice but then you won’t be able to live without them

[ChrisjChrisj]

Thanks for the replies.
regarding “try changing the display property”, to what?

Also, how does this keep the watermark displayed:
“display: none!important;”
I don’t understand that.

And, if you like to provide a bit more details on how to “locate that” with dev tools, I’d appreciate any additional guidance.
Thanks again

[PaulOB]

@ChrisjChrisj

“display: none!important;”

ha ha sorry, I meant display:block!important

[PaulOB]

@ChrisjChrisj

And, if you like to provide a bit more details on how to “locate that” with dev tools,

Open devtools (usually right click and then inspect will open devtools). You will see the rendered html in the panel and look through it until you find the element you are looking for and will look this.

If you then look in the css panel in devtools it will show the styles that are applied to that element. You can force hover states (right click the element in devtools) to see if there is a hover rule being applied. Usually you can narrow down where the rules are coming from quite quickly.

On the other hand if JS is being used to change the display you may see something change in the devtools html when you hover that element and that will give a clue that you should look at the js instead. It takes a bit of practice but I use devtools constantly even when writing my own code.