I've been attempting to design a card that performs a 3D rotation when the mouse hovers over it. While I've successfully incorporated the background and front image of the card, I'm facing an issue with adding text to it.
Here is the incorrect HTML code:
<div class="front">
<div class="front_card_icon">
<img src="image/indoor_plants_icon_white.svg">
</div>
<p>THIS TEXT IS CAUSING THE ISSUE</p>
</div>
Erroneous CSS code:
.front {
width: 100%;
height: 100%;
overflow: hidden;
backface-visibility: hidden;
position: absolute;
transition: transform .6s linear;
background-color: #2D3436;
}
.front_card_icon {
position: relative;
bottom: 8%;
transform: scale(0.70);
z-index: 2;
}
.front p {
positon:relative;
text-align: center;
color:white;
}
Despite applying position: relative to the <p> tag as suggested, the text remains invisible.
You can view the problem on jsfiddle. In the example provided, the text is visible as the image fails to load. However, when the image loads (even though it is transparent), the text disappears.
Thank you for looking into this issue!