How to overlay two sets of div’s using CSS?

Question

Hello, everybody I’m running a little project, it’s a memory game. My idea was to create a div (which is the letter) and within that div put two other Ivs (which are the front and back of the letter). But when I style the front and back, I can’t get those elements to overlap. What I wanted to do is let the front overlap the back, so when the user clicks I would change the front display to 'None', so the image would appear.

The complete source code is here: https://github.com/NataliaCarvalho03/memoryGame.git

Answer 1

Hi.

I made a jsfiddle using the code you have in the repository, you can see here https://jsfiddle.net/Compay/4r1aqd1q/2/

Basically, the div.card must have position: relative; and the div.front and div.back must have position: absolute; top: 0; left: 0;. This will cause both faces to be at the top left of the div.card, can see here more info about this technique.

Instead of hiding/showing faces, the ideal is in div.card use a CSS class to control which face is visible, in this case I am using the class .flipped

I also put a little animation in CSS, based in this article

I hope it helps a little, and motivates you to continue with the project. If you have any more questions, we will be here to help.

Answer 2

You can try it that 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>

Do the test there. In this example I put a Button that turns the card, but you can do when you click on the main Div.