CODEWITHSUNDEEP
htmlcss
tony
tony

Reputation: 610

Place and scale text onto of responsive image

I want to place text (I plan on dynamically generating this text later, hence why it isn't in the image) over an image (where the white rectangle is) and have the text scale along with the responsive image. I have successfully placed text over the image but I am having trouble keeping it aligned with where it is supposed to be in the image (the white rectangle).

I realize that if I was to make the rectangle in the image in the center this would be easier, however that's not an option in this scenario.

How can I keep this text in the white rectangle and keep it scaled with the image?

Edit: Apologies, the red arrows are placeholders for a mockup I am currently designing.

Thanks

p{
        z-index: 100;
        position: absolute;
        color: black;
        font-size: 24px;
        font-weight: bold;
        left: 150px;
        top: 275px;
    }
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-wrap w-full justify-center content-center px-12">
    <div class="flex flex-wrap lg:items-center min-h-screen">
        <div class="flex flex-col w-full lg:w-1/2 justify-center">
            <img src="https://i.imgur.com/sxnQAi2.png" class="object-contain max-h-full">
            <p id="text">Dynamic text!</p>
        </div>
        <div class="flex flex-wrap w-full lg:w-1/2 justify-center">
            <h3 class="text-3xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
    </div>
</div>

Upvotes: 2

Views: 511

Answers (2)

Huda Addelson
Huda Addelson

Reputation: 126

    <script src="https://cdn.tailwindcss.com"></script>
    <div class="flex flex-wrap w-full justify-center content-center px-12">
        <div class="flex flex-wrap lg:items-center min-h-screen">
            <div class=" relative flex flex-col w-full lg:w-1/2 justify-center">
                <img src="https://images.unsplash.com/photo-1625838144804-300f3907c110?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" class="object-contain max-h-full">
                <p id="text" class="absolute text-white top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4">Dynamic text!</p>
            </div>
        <div class="flex flex-wrap w-full lg:w-1/2 justify-center">
            <h3 class="text-3xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
        </div>
    </div>

if you use tailwind css then in parent give relative position and in dynamic text add class position absolute and give transform as I included.

Upvotes: 5

Jaswinder Kaur
Jaswinder Kaur

Reputation: 1634

p#text {
    box-shadow: 0 4px 20px 8px #ddd;
    padding: 40px;
    margin: 30px;
    border-radius: 10px;
    max-width: 240px;
    margin: 0 auto;
    text-align: center;
}
 <p id="text">Dynamic text!</p>

Upvotes: 2

Related Questions