Oops, I wonder if you can hide an image / video in an HTML site but the image / video stays there, and if you click on the image / video it can be played in the image / video player
As if the image / video was there, being able to be clicked and executing activities, but being hidden
Here is a very simple solution, not something extraordinary. Basically, you use the target selector that will apply a style when you click on the element, applying visibility: visible to the element.
<a> tag, pointing to href to where you want to redirect, in this case the id of the element you want to display.
.principal{
display: flex;
justify-content: center;
}
#borda{
border: 1px solid black;
width: 50px;
height: 50px;
}
#promocao{
width: 50px;
height: 50px;
opacity: 0;
cursor: context-menu;
}
#outros{
width: 200px;
height: 200px;
visibility: hidden;
}
#outros:target{
text-align: center;
visibility: visible;
background: blue;
color: white;
}<div class="principal">
<div id="borda">
<a href="#outros">
<div id="promocao"></div>
</a>
</div>
<div id="outros"> VOCÊ ACHOU O MEGA CUPOM DE DESCONTO </div>
</div>Note: I left a border, to see where the field is clickable.