Html Text inside
is not showing up

Question

I have tried to create a card which rotates in 3D if mouse pointer hovers over it. I have successfully added the background and image of the front of the card, but when trying to add text to it (ie, when trying to add text to a div element), it is not displayed.

Erroneous html code:

    <div class="front">
        <div class="front_card_icon">
            <img src="image/indoor_plants_icon_white.svg">
        </div>

        <p>THIS TEXT IS THE PROBLEM</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;
}

According to this post, the problem should have been solved after using position:relative on the

tag, but that sadly didn't resolve my problem.

This is jsfiddle for my problem. Note that there the text is properly displayed, because the image can't be loaded. However, when the image is loaded, the text is not displayed, ALTHOUGH the image is transparent.

Thank you for your time!

make the z-index of the text bigger than the image. Actually the image is on the top — Temani Afif, Sep 26 '19 at 23:01
Use this site [https://placeholder.pics/] with the dimension of the image you are using, so we can debug the issue better. I did a quick test and it is likely fixed with z-index as @TemaniAfif suggested, and position:absolute on the `p` and `.front_card_icon` as @fiter suggested. Alternatively you can use an svg as a background image. — WizardCoder, Sep 26 '19 at 23:09
https://jsfiddle.net/ht2eb7xj/1/ this is what you are looking for? — Aditya Thakur, Sep 27 '19 at 00:10
After adding top padding to the text to push it down, the code worked! Here is the updated jsfiddle with the desired effect: https://jsfiddle.net/King_Fish/4c8uL1p6/ — AnimaVivens, Sep 27 '19 at 08:29

score 2 · Accepted Answer · answered Sep 27 '19 at 00:36

<div class="front">
    <div class="front_card_icon">
        <img src="image/indoor_plants_icon_white.svg">
    </div>

    <p>Text to be centered vertically on top of image</p>
</div>

Your p tag is below the image and so the text is being pushed down and hidden by it's parent container.

To center the text within it's parent div (minimally) you would have to:

break the p tag out of the normal flow using position: absolute (which will help position it correctly - but will also cause it to disappear behind the image)
bring the p tag back on top with z-index: 2
and centre the p tag vertically with:

   position:absolute;
   top: 50%;
   transform: translateY(-50%);

Here is the updated fiddle

A more elegant solution might involve switching stategy and applying the image as a background. That would take the img tag out of the content flow, allowing the text to be centred without absolute positioning and z-indexing.

score 1 · Answer 2 · answered Sep 26 '19 at 23:49

You should set your p element's position to fixed and then give it 50% of top and left :

.front p {
  position:fixed;
  text-align: center;
  color:white;
  top:50%;
  left:50%;
  z-index:3;
}

Here is the live result(jsfiddle). For more information please check this.

Html Text inside is not showing up

2 Answers2

Html Text inside
is not showing up