-3
I wonder if it is possible to 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 is there, it can be clicked and running activities, but being hidden
1
Here is a very simple solution, it is not something extraordinary. Basically, it uses the selector target that will apply a style when clicking on the element, applying the visibility: visible in the element.
"The problem" of this is that it is necessary to reference a tag <a>, pointing with the href where you want to redirect, in case the id the element you want to show.
.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 an edge, to see where is the field that is clickable.
legal, just one question: there is the possibility that while the page is being loaded, the coupon will appear quickly (before the opacity: 0; be loaded) and then disappear (when the opacity: 0; is loaded)?
PERFECT! But, I would like the person to click on the site!
@Douglas, according to my knowledge, in the CSS no. Neither he, nor the display nor the visibility. I have already tested applying a class by JS, more specifically Jquery, and with it appeared the div before you finish charging and then disappeared.
@Douglas from what I understand you would like to blink the div and then hide it, this very quickly, this is it? If positive, you need to use keyframes in CSS, a topic that might help: https://stackoverflow.com/questions/29846224/css-animation-with-delay-and-opacity
+1, @Tiagoboeing actually asked this because, as it comes to hiding a discount coupon on the page, it would probably be an unwanted behavior if the coupon appeared while loading the page (it would be too easy to find it). I understand the purpose of sdfw, it would be interesting to make sure that the coupon will only appear when the user hovers over it or clicks on it, and never while loading the page.
Oh yes, in this case the @sdfw answer is the best one. You can hide the mouse’s "little hand" cursor, so on the computer it is more difficult to find. Just add in css cursor: none;
Browser other questions tagged html
You are not signed in. Login or sign up in order to post.
Why are you interested in doing this? Do you have a link from a website that does this to give an example of what you want? Maybe you can just apply one
display: none;what you want to hide and put in place an element that you can interact with and use to open the hidden image/video.– Douglas
Friend if the stuff will be hidden as you will click on it??
– hugocsl
@Douglas I want to make a promotion on my site, which is basically the customer who finds the image gets 5% off the photo coupon https://youtu.be/i7SgSaRuM5Q?t=94
– sdfw
Depending on how it is implemented, it can be quite easy for a slightly more advanced user to find the image, if he knows how to open the page source (Ctrl+U) or the developer tools (Ctrl+Shift+i). Even so, wouldn’t it simply be the case that you put an invisible div somewhere on the page, which will react when the cursor passes over it or when it is clicked? The reaction of div would be to call a javascript code (or have a CSS
::before) that brings up the coupon. That would be it?– Douglas
Yes! Just like you do?
– sdfw
@Douglas Yes! Just like you do?
– sdfw
On the link you put in the comment, I saw them use
opacity: 0;to make the element invisible. I tested it in a video suggestion on the side and what happened is that the suggestion "disappeared" (because it was 100% transparent) but it continued occupying its space, and it was still possible to click it (the cursor also changes when passing over it normally) and open the video. Maybe this is the easiest solution for you:opacity: 0;, and make her haveopacity: 1;when there is eventhoverin it. You don’t even need javascript.– Douglas
camouflage with Hidden the video or image and hide the link somewhere or several objects to confuse, misleading. , use php so the user will not see which link is correct
– user61936
@Douglas Could you explain me better? Or send me everything ready!
– sdfw
Mano se vc quer fazer igual ao vídeo que vc citou no link your site will take om punishment from Google sooner or later. This is practice
black hatand you may even be banned from Google search results... gets the tip– hugocsl