flip-card | Polymer element that uses CSS 3D Transforms | Web Framework library

I am trying to implement a delete button for each newsletter signup on my Users Show view in an admin section.

What I'm trying now:

I am new to webdevelopment and I created this in bootstrap 5: codepen

However, instead having the icons in the front I wanted that an images is showing. Then when the card is flipped it should, the content should stay, as demonstrated in codepen. Can anyone help me to realize my request?

This is the CSS code:

I am new to webdevelopment and have this issue. For this I created a Codepen

For the 6 cards I wanted to ad an image. When I hover over the image it should swap the card and show content. So when the first three cards swaps it still shows up an image instead of the content as the under the first three cards.

So my idea is: when I hover over an image it should swap the card and show only a white background with content as the under three cards.

Can anyone assist me here on how to do it?

I'm new to coding, and I'm trying to learn the basics. I wanted to practice what I learned by making flashcards (nothing complicated like saving it, importing it, or exporting it). So far, I made a table that the user can edit. I know how to gather data from the table, but I don't know how to make a CSS flashcard appear every time the user adds a card to the table. I am aware that the code will not work since I put the CSS in JavaScript since this code is just meant to show what I am trying to do. Also, if I am taking a completely wrong approach, please let me know. Thank you! Please excuse the poor variable naming, I was just testing some things.

I would like to display two flip cards in a row using grid. Each of the flip cards shall contain a squared image on the front and some text on the back. How can I achieve not having to specify any height within the .flip-card css class? I would like the flip card to automatically adjust its height to the width of the image which itself is dependent on the overall space available within the grid (and therefore changes from device to device). At the moment I have to hardcode the height to make it work. But this inevitably leads the flip card not to be squared but to be a rectangle. Any ideas?

This is my code:

I am new to HTML and want to make a specific element to flip. Now I created this file.

However, when the content, for the first element (see codepen) when it is flipped it is at the bottom (see picture). Can someone help that when the card is flipped, the content is at the top and not at the bottom as shown in the picture?

I thought I had everything covered, but I'm now having issues with flip boxes working on Mac. I was able to make them compatible with different browsers on phones. I had someone with a Mac say that they were having problems with the animation. I heard that they saw a weird blinking and can see the front of the card through the back. I'm not sure what I'm missing. The last time I had this issue was with iOS, but I was just missing one line of code. Any suggestions? Honestly, I'm winging this as I go and can use any guidance.

I don't really have any background of HTML or CSS. I've been figuring out how to change existing codes to help make sections of a website. The only issue is that I can't make it mobile-friendly. I made a code to create 8 flip boxes that work when you visit the website on a computer. However, they don't work so well on mobile. I don't really know what I'm doing, but is there anyway I can align the 8 boxes in one column for mobile use and use touch to make them flip? Thanks!

I have a Flip cards, based on: https://www.w3schools.com/howto/howto_css_flip_card.asp.

They work well, nonetheless in mobile (since there's no mouse hover) it expects to tap out in order to the card flip to the unhover state. To prevent that, I want to remove hover event after a certain time has passed using javascript when previously pressed.

This is my current JS code: