• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Making a card disappear

M7N6l

New Coder
Hello all,


I am super newbie here so please forgive me if my question seems dumb:

I am learning CSS right now and I want to do something and I dont know if it is even possible.

I am making a card game and I would like to make the card slowly fade away when it is clicked. Right now, it simply disappears instantly. I am not in charge of HTML, only CSS, on this project so I am not sure if what I want to achieve can be taken care of on my side.


Thank you for your replies

Manu
 

OldMan

King Coder
See if this helps:
Code:
<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: opacity;
  transition-duration: 5s;
}

div:hover {
  opacity: 0;
}
</style>
</head>
<body>
<div></div>
</body>
 

cbreemer

King Coder
@OldMan That works fine, but only for hover. The OP wants it to work on click. For some reason there is no CSS event for click but that is easily solved with a JS onclick event:

HTML:
<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: opacity;
  transition-duration: 5s;
}
</style>
</head>
<body>
<div id="x" onclick="x.style.opacity = 0;"></div>
</body>
</html>
However the OP has no access to the HTML so this is not likely to be an option.....
 
Last edited:

OldMan

King Coder
This hack (using a checkbox to simulate 'onclick') has been around for a while. I modified it to make the checkbox 'disappear' by making the item shrink to oblivion. If the card is left at its original dimension the user could click in the empty space and bring it back.
Code:
<style>
div {
    width: 100px;
    height: 100px;
    background: red;
    transition: 5s, width 15s, height 15s;
}
#demo {
    display: none;
}
#demo:checked + label >div{
    width: 0px;
    height: 0px;
    opacity: 0;
}
</style>
</head>

<body>
<input type="checkbox" id="demo"/>
<label class="demo" for="demo"><div></div></label>
</body>
 
Last edited:

cbreemer

King Coder
I did see this hack pass by too, but found it a bit too arcane for my taste 😁
Anyway it still requires modifying the HTML which I think the OP is not allowed to.
 
Last edited:
Top