Hello everyone! I'm running a small project, it's a memory game. My idea was to create a div (which is the letter) and within that div put two other divs (which are the front and back of the letter). But when I stylize the front and back I can not get these elements overlapping. What I wanted to do is to leave the front superimposed on the back, so when the user clicked I would change the front display to 'none', so the image would appear.
The full source code is here: link
Hi.
I made a jsfiddle using the code you have in the repository, you can see here link
Basically, div.card must have position: relative; and div.front and div.back must have position: absolute; top: 0; left: 0; .
This will make both faces the top left of div.card , you can view here more info about this technique.
Instead of hiding / showing faces, it is ideal in div.card to use a CSS class to control which face is visible, in this case I am using the class .flipped
I also put a little CSS animation based on in this article
I hope it helps a little, and gives you motivation to continue with the project. If you have more questions, we'll be here to help.
You can try this way
<div id="carta">
<div id="back" style="display:block;"></div>
<div id="front" style="display:none;"></div>
</div>
<button type="button" onclcick="virar()">Virar</button>
<script>
function virar(){
$('#back').css("display", "none");
$('#front').css("display", "block");
}
<script>
Take the test there. In this example I put a Button that turns the chart, but you can do it when you click on the main Div.