Scale child div based on parent div
How can I make the Overlay Content with the Trailer button above the Summary scale in size based on the background image? Sometimes the background image is short in height and the overlay content overflows. I want it to scale down in size so it can fit inside the background image.
<div class="relative w-full rounded-lg overflow-hidden">
<!-- Background Image -->
<img class='w-full rounded-lg' src='{{$this->largeCover}}' alt="Background Image">
<!-- Gradient Overlay -->
<div class="absolute top-0 left-0 right-0 bottom-0 bg-gradient-to-b from-transparent to-zinc-800"></div>
<!-- Overlay Content with the Trailer button above the Summary -->
<div class="absolute bottom-0 left-0 w-full p-4">
<!-- Modal Toggle Button -->
<div class="flex flex-col items-center w-[15rem] mb-8">
<div class="inline-block w-full h-[22.5rem] overflow-hidden rounded-t-2xl">
<img class="w-full h-full object-cover rounded-t-2xl" src="{{$this->record['large_cover_image']}}" alt="" /> <!-- Cover image -->
</div>
<button data-modal-target="movieModal" data-modal-toggle="movieModal" class="h-10 w-full bg-green-700 hover:bg-green-800 font-bold">Watch</button>
<button data-modal-target="trailerModal" data-modal-toggle="trailerModal" class="h-10 w-full rounded-b-2xl bg-red-700 hover:bg-red-800 font-bold">Trailer</button>
</div>
<!-- Summary Content -->
<div class="transition-all duration-700 ease-in-out max-h-32 overflow-hidden hover:max-h-96 bg-black/50 text-white p-4 rounded-lg backdrop-blur-md">
<div class="text-3xl font-bold">Summary</div>
@if($this->summary)
<div>{{$this->summary}}</div>
@else
<div class="text-neutral-200 italic">Not provided :(</div>
@endif
</div>
</div>
</div>
<div class="relative w-full rounded-lg overflow-hidden">
<!-- Background Image -->
<img class='w-full rounded-lg' src='{{$this->largeCover}}' alt="Background Image">
<!-- Gradient Overlay -->
<div class="absolute top-0 left-0 right-0 bottom-0 bg-gradient-to-b from-transparent to-zinc-800"></div>
<!-- Overlay Content with the Trailer button above the Summary -->
<div class="absolute bottom-0 left-0 w-full p-4">
<!-- Modal Toggle Button -->
<div class="flex flex-col items-center w-[15rem] mb-8">
<div class="inline-block w-full h-[22.5rem] overflow-hidden rounded-t-2xl">
<img class="w-full h-full object-cover rounded-t-2xl" src="{{$this->record['large_cover_image']}}" alt="" /> <!-- Cover image -->
</div>
<button data-modal-target="movieModal" data-modal-toggle="movieModal" class="h-10 w-full bg-green-700 hover:bg-green-800 font-bold">Watch</button>
<button data-modal-target="trailerModal" data-modal-toggle="trailerModal" class="h-10 w-full rounded-b-2xl bg-red-700 hover:bg-red-800 font-bold">Trailer</button>
</div>
<!-- Summary Content -->
<div class="transition-all duration-700 ease-in-out max-h-32 overflow-hidden hover:max-h-96 bg-black/50 text-white p-4 rounded-lg backdrop-blur-md">
<div class="text-3xl font-bold">Summary</div>
@if($this->summary)
<div>{{$this->summary}}</div>
@else
<div class="text-neutral-200 italic">Not provided :(</div>
@endif
</div>
</div>
</div>
4 Replies
Lemme make this simpler:
https://play.tailwindcss.com/
<div class="relative w-full overflow-hidden rounded-lg">
<!-- Background Image -->
<img class="w-full rounded-lg" src="https://raw.githubusercontent.com/SebLague/Images/master/Geographical%20Adventures.jpg" alt="Background Image" />
<!-- Gradient Overlay -->
<div class="absolute bottom-0 left-0 right-0 top-0 bg-gradient-to-b from-transparent to-zinc-800"></div>
<!-- Overlay Content with the Trailer button above the Summary -->
<div class="absolute bottom-0 left-0 w-full p-4">
<!-- Modal Toggle Button -->
<div class="mb-8 flex w-[15rem] flex-col items-center">
<div class="inline-block h-[22.5rem] w-full overflow-hidden rounded-t-2xl">
<!-- Adjusted container for image -->
<!-- Image adjusted with object-fit cover -->
<img class="h-full w-full rounded-t-2xl object-cover" src="{{$this->record['large_cover_image']}}" alt="" />
</div>
<button class="h-10 w-full bg-green-700 font-bold hover:bg-green-800">Download</button>
<button data-modal-target="trailerModal" data-modal-toggle="trailerModal" class="h-10 w-full rounded-b-2xl bg-red-700 font-bold hover:bg-red-800">Trailer</button>
</div>
<!-- Summary Content -->
<div class="max-h-max overflow-hidden rounded-lg bg-black/50 p-4 text-white backdrop-blur-md transition-all duration-700 ease-in-out hover:max-h-96">
<div>Lorem ipsum ...</div>
</div>
</div>
</div>
<div class="relative w-full overflow-hidden rounded-lg">
<!-- Background Image -->
<img class="w-full rounded-lg" src="https://raw.githubusercontent.com/SebLague/Images/master/Geographical%20Adventures.jpg" alt="Background Image" />
<!-- Gradient Overlay -->
<div class="absolute bottom-0 left-0 right-0 top-0 bg-gradient-to-b from-transparent to-zinc-800"></div>
<!-- Overlay Content with the Trailer button above the Summary -->
<div class="absolute bottom-0 left-0 w-full p-4">
<!-- Modal Toggle Button -->
<div class="mb-8 flex w-[15rem] flex-col items-center">
<div class="inline-block h-[22.5rem] w-full overflow-hidden rounded-t-2xl">
<!-- Adjusted container for image -->
<!-- Image adjusted with object-fit cover -->
<img class="h-full w-full rounded-t-2xl object-cover" src="{{$this->record['large_cover_image']}}" alt="" />
</div>
<button class="h-10 w-full bg-green-700 font-bold hover:bg-green-800">Download</button>
<button data-modal-target="trailerModal" data-modal-toggle="trailerModal" class="h-10 w-full rounded-b-2xl bg-red-700 font-bold hover:bg-red-800">Trailer</button>
</div>
<!-- Summary Content -->
<div class="max-h-max overflow-hidden rounded-lg bg-black/50 p-4 text-white backdrop-blur-md transition-all duration-700 ease-in-out hover:max-h-96">
<div>Lorem ipsum ...</div>
</div>
</div>
</div>
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
As you can see, the cover image overflows
but it must be contained inside and scale depending on how much text there is
Anyone?
Not totally following what you want. Can you share a video of the issue.