Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • 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
 
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>
 
@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 by a moderator:
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:
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 by a moderator:

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom