Is there a way to show a kind of tooltip with low opacity on hover in js or css?

Question

I want it so that on the hover of "show", the iframe shows at half opacity, and on click it shows full, I have something like this; So when you x out of the iframe, and hover on the show more, it shows a little tooltip thing of the iframe that shows up on click of the show more.

 document.querySelector("#xout").addEventListener("click", function() { document.getElementById("xout").style.display = "none"; document.getElementById("adlike").style.display = "none"; document.getElementById("showcat").style.display = "block"; }); document.querySelector("#showcat").addEventListener("click", function() { document.getElementById("wrapperAd").querySelector(":hover").style.opacity = "0.5"; document.getElementById("xout").style.display = "block"; document.getElementById("adlike").style.display = "block"; document.getElementById("showcat").style.display = "none"; });

 .iframes { box-sizing: inherit; position: fixed; height: 22vh; overflow-x: hidden; bottom: 0; left: 0; width: 50%; --iframemaincolor: hsl(150, 64%, 29%); border: 5px var(--iframemaincolor); border-style: outset inset; } .catlink { background-color: var(--iframemaincolor); } #xout { transform: translate(25%, -70%); float: right; color: transparent; -webkit-background-clip: text; background-color: hsl(0, 30%, 70%); width: min-content; height: min-content; position: relative; text-shadow: -2px -2px red; } /*is in iframe, max seperate elemnti in same parent.*/ #xout:hover { text-decoration: wavy; color: red; text-shadow: none; } #xout::selection { color: transparent; background-color: transparent; display: none; } #wrapperAd { position: fixed; height: 22vh; float: left; width: 53%; box-sizing: border-box; bottom: 0; left: 0; } #showcat { letter-spacing: 0.5vw; word-spacing: 1vw; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; position: absolute; bottom: 0; background-color: hsl(0, 0%, 80%); border: .3vh solid hsl(0, 0%, 15%); left: 0; border-radius: 1vw; right: 0; padding-inline: 1vw; width: max-content; height: 10%; display: none; } .catshowX:hover { opacity: 0.9; cursor: pointer; }

 <div id="wrapperAd"> <iframe src="catLink.html" class="iframes catlink" id="adlike" scrolling="no"> </iframe> <h1 id="xout" class="catshowX">&cross;</h1> <div id="showcat" class="catshowX">Show &UpArrow;</div> </div> </div>

But instead, the button of show is being half opacity, any solutions with JavaScript or CSS? Here is the website; https://proking73.github.io/PWIL-with_Sis/ It's in the bottom left.

Answer 1

#id:hover{
opacity:60%;
} 

It decreases opacity of any object including img.

Answer 2

I found an answer, with javascript. I use event listeners to make the display and opacity set on the iframe on mouseover, and on mouseout I made it hide.

 document.querySelector("#xout").addEventListener("click", function() { document.getElementById("xout").style.display = "none"; document.getElementById("adlike").style.display = "none"; document.getElementById("showcat").style.display = "block"; }); document.querySelector("#showcat").addEventListener("mouseover", function() { document.getElementById("adlike").style.opacity = "0.5"; document.getElementById("adlike").style.display = "block"; }); document.querySelector("#showcat").addEventListener("mouseout", function() { document.getElementById("adlike").style.display = "none"; }); document.querySelector("#showcat").addEventListener("click", function() { document.getElementById("wrapperAd").querySelector(":hover").style.opacity = "0.5"; document.getElementById("xout").style.display = "block"; document.getElementById("adlike").style.display = "block"; document.getElementById("showcat").style.display = "none"; });

 .iframes { box-sizing: inherit; position: fixed; height: 22vh; overflow-x: hidden; bottom: 0; left: 0; width: 50%; --iframemaincolor: hsl(150, 64%, 29%); border: 5px var(--iframemaincolor); border-style: outset inset; } .catlink { background-color: var(--iframemaincolor); } #xout { transform: translate(25%, -70%); float: right; color: transparent; -webkit-background-clip: text; background-color: hsl(0, 30%, 70%); width: min-content; height: min-content; position: relative; text-shadow: -2px -2px red; } /*is in iframe, max seperate elemnti in same parent.*/ #xout:hover { text-decoration: wavy; color: red; text-shadow: none; } #xout::selection { color: transparent; background-color: transparent; display: none; } #wrapperAd { position: fixed; height: 22vh; float: left; width: 53%; box-sizing: border-box; bottom: 0; left: 0; } #showcat { letter-spacing: 0.5vw; word-spacing: 1vw; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; position: absolute; bottom: 0; background-color: hsl(0, 0%, 80%); border: .3vh solid hsl(0, 0%, 15%); left: 0; border-radius: 1vw; right: 0; padding-inline: 1vw; width: max-content; height: 10%; display: none; } .catshowX:hover { opacity: 0.9; cursor: pointer; }

 <div id="wrapperAd"> <iframe src="catLink.html" class="iframes catlink" id="adlike" scrolling="no"> </iframe> <h1 id="xout" class="catshowX">&cross;</h1> <div id="showcat" class="catshowX">Show &UpArrow;</div> </div> </div>