how to make flip cards self sized
Hi guys!
How to make both height and width of the flip cards self sized? Right now the width is self sized. I want it to have no excessive white part like the one in the middle.
https://codepen.io/codedkk/pen/wvxVVrz
Original code is from the article in the js pen.
I tried
.card-front : background-color: transparent; but card back has bg color different from container bg color, so when flipped, the height shows.
I tweaked the grid rows but nothing changed... don rly understand how it works..
Thb, i don rly understand how this code come into being after reading the article. 😂 I understand the usual way to make flip cards with absolute position after seeing a video tutorial which shows the order and effects of the code in steps.
Any help would be appreciated!1 Reply
i've changed your setup a bit. using object-fit: cover on the images to make it fill the available space. also used grid to stack the back and front card
https://codepen.io/MarkBoots/pen/rNZBmba