CODEWITHSUNDEEP
reactjstailwind-css
rohit
rohit

Reputation: 179

Tailwind CSS, positioning one image over another

I am trying to position an image over image. Basically I want the image to fit correctly at the chest area position on the hoodie, but it's not coming out properly. How do I do it in a clean way that is responsive as well?

My code:

<div className="basis-1/2">
  <div className="max-w-lg container mx-auto">
    <img className="w-full" src={`${router.basePath}/assets/images/Hoodie black label.jpg`} alt="Empty Hoodie"/>
    <div className="place-items-center">
      <img className="w-1/6 absolute top-1/3 right 1/4 place-items-center h-40 w-40" src={urlvalue} alt="Picked NFT to Print"/>
    </div>
  </div>
</div>

Thanks in advance!

Upvotes: 1

Views: 2655

Answers (1)

MagnusEffect
MagnusEffect

Reputation: 3925

You can overlay an image over another like this,

<script src="https://cdn.tailwindcss.com"></script>

    <div class="relative mix-blend-lighten">
      <img src="https://m.media-amazon.com/images/I/61ktWbf0z4L._UX679_.jpg" alt="BannerImage" class="absolute h-[] w-full object-cover object-right " />
      <img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back04.jpg" alt="BannerImage" class="absolute h-[20vh] w-[30vh] object-cover object-right mx-44 mt-44 sm:mx-72 sm:mt-72" />
    </div>

But since both the image had absolute position, then you have to add different margins for the upper image for each screen breakpoints, so that it lies always on chest area of hoodie image.

Upvotes: 2

Related Questions