'How to add overflow-hidden in the image of this tailblock component?
I am using the follwing tailblock component which is based on tailwind.css
What I want is when I hover, the image scales up within the image dimensions only. This means the image zooms but the dimension (height & width ) remains same.
I tried this, but it is overflowing the right side.
<script src="https://cdn.tailwindcss.com"></script>
<section class="text-gray-600 body-font overflow-hidden">
<div class="container px-5 py-24 mx-auto">
<div class="lg:w-4/5 mx-auto flex flex-wrap overflow-hidden">
<img alt="ecommerce" class="lg:w-1/2 w-full lg:h-auto h-64 object-cover object-center rounded transform transition duration-500 hover:scale-125 ease-in-out" src="https://dummyimage.com/400x400">
<div class="lg:w-1/2 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0">
<h2 class="text-sm title-font text-gray-500 tracking-widest">BRAND NAME</h2>
<h1 class="text-gray-900 text-3xl title-font font-medium mb-1">The Catcher in the Rye</h1>
<p class="leading-relaxed">Fam locavore kickstarter distillery. Mixtape chillwave tumeric sriracha taximy chia microdosing tilde DIY. XOXO fam indxgo juiceramps cornhole raw denim forage brooklyn. Everyday carry +1 seitan poutine tumeric. Gastropub blue bottle austin listicle pour-over, neutra jean shorts keytar banjo tattooed umami cardigan.</p>
<div class="flex mt-6 items-center pb-5 border-b-2 border-gray-100 mb-5">
<div class="flex">
<span class="mr-3">Color</span>
<button class="border-2 border-gray-300 rounded-full w-6 h-6 focus:outline-none"></button>
<button class="border-2 border-gray-300 ml-1 bg-gray-700 rounded-full w-6 h-6 focus:outline-none"></button>
<button class="border-2 border-gray-300 ml-1 bg-indigo-500 rounded-full w-6 h-6 focus:outline-none"></button>
</div>
<div class="flex ml-6 items-center">
<span class="mr-3">Size</span>
<div class="relative">
<select class="rounded border appearance-none border-gray-300 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 text-base pl-3 pr-10">
<option>SM</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<span class="absolute right-0 top-0 h-full w-10 text-center text-gray-600 pointer-events-none flex items-center justify-center">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4" viewBox="0 0 24 24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</div>
</div>
</div>
<div class="flex">
<span class="title-font font-medium text-2xl text-gray-900">$58.00</span>
<button class="flex ml-auto text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">Button</button>
<button class="rounded-full w-10 h-10 bg-gray-200 p-0 border-0 inline-flex items-center justify-center text-gray-500 ml-4">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</section>How to resolve this?
Solution 1:[1]
CSS scale() basically increases or decreases the size/dimensions of an element (according to actual width and height). If your actual image size is 100x100 and you're using scale(1.1) then the size will be 110x110. So overflow: hidden won't hide the excessive parts.
In that case, just wrap the image with a <div/> element and apply overflow: hidden to it.
<div class="overflow-hidden">
<img src="" alt=""/>
</div>
Here is the solved snippet:
<script src="https://cdn.tailwindcss.com"></script>
<section class="text-gray-600 body-font overflow-hidden">
<div class="container px-5 py-24 mx-auto">
<div class="lg:w-4/5 mx-auto flex flex-wrap overflow-hidden">
<div class="lg:w-1/2 w-full overflow-hidden">
<img alt="ecommerce" class="w-full lg:h-auto h-64 object-cover object-center rounded transform transition duration-500 hover:scale-125 ease-in-out" src="https://dummyimage.com/400x400">
</div>
<div class="lg:w-1/2 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0">
<h2 class="text-sm title-font text-gray-500 tracking-widest">BRAND NAME</h2>
<h1 class="text-gray-900 text-3xl title-font font-medium mb-1">The Catcher in the Rye</h1>
<p class="leading-relaxed">Fam locavore kickstarter distillery. Mixtape chillwave tumeric sriracha taximy chia microdosing tilde DIY. XOXO fam indxgo juiceramps cornhole raw denim forage brooklyn. Everyday carry +1 seitan poutine tumeric. Gastropub blue bottle austin listicle pour-over, neutra jean shorts keytar banjo tattooed umami cardigan.</p>
<div class="flex mt-6 items-center pb-5 border-b-2 border-gray-100 mb-5">
<div class="flex">
<span class="mr-3">Color</span>
<button class="border-2 border-gray-300 rounded-full w-6 h-6 focus:outline-none"></button>
<button class="border-2 border-gray-300 ml-1 bg-gray-700 rounded-full w-6 h-6 focus:outline-none"></button>
<button class="border-2 border-gray-300 ml-1 bg-indigo-500 rounded-full w-6 h-6 focus:outline-none"></button>
</div>
<div class="flex ml-6 items-center">
<span class="mr-3">Size</span>
<div class="relative">
<select class="rounded border appearance-none border-gray-300 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 text-base pl-3 pr-10">
<option>SM</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<span class="absolute right-0 top-0 h-full w-10 text-center text-gray-600 pointer-events-none flex items-center justify-center">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4" viewBox="0 0 24 24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</div>
</div>
</div>
<div class="flex">
<span class="title-font font-medium text-2xl text-gray-900">$58.00</span>
<button class="flex ml-auto text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">Button</button>
<button class="rounded-full w-10 h-10 bg-gray-200 p-0 border-0 inline-flex items-center justify-center text-gray-500 ml-4">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</section>Solution 2:[2]
You could put the image in a div container and add the overflow-hidden class. Now the scaled image will never be bigger than its container.
Concept:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="flex min-h-screen items-center justify-center p-10">
<div class="h-24 w-full overflow-hidden rounded">
<img class="h-full w-full transform object-cover object-center transition duration-500 ease-in-out hover:scale-125" src="https://dummyimage.com/400x400" />
</div>
</div>Original Code
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<section class="body-font overflow-hidden text-gray-600">
<div class="container mx-auto px-5 py-24">
<div class="mx-auto flex flex-wrap overflow-hidden lg:w-4/5">
<!-- Image Container -->
<div class="h-64 w-full overflow-hidden rounded lg:h-auto lg:w-1/2">
<img alt="ecommerce" class="h-full w-full transform object-cover object-center transition duration-500 ease-in-out hover:scale-125" src="https://dummyimage.com/400x400" />
</div>
<!-- END Image Container -->
<div class="mt-6 w-full lg:mt-0 lg:w-1/2 lg:py-6 lg:pl-10">
<h2 class="title-font text-sm tracking-widest text-gray-500">BRAND NAME</h2>
<h1 class="title-font mb-1 text-3xl font-medium text-gray-900">The Catcher in the Rye</h1>
</div>
</div>
</div>
</section>Solution 3:[3]
<script src="https://cdn.tailwindcss.com"></script>
<section class="text-gray-600 body-font overflow-hidden">
<div class="container px-5 py-24 mx-auto">
<div class="lg:w-4/5 mx-auto flex flex-wrap overflow-hidden">
<div class="overflow-hidden w-full">
<img alt="ecommerce"
class="w-full h-64 object-cover object-center rounded transform transition duration-500 hover:scale-125 ease-in-out"
src="https://dummyimage.com/400x400">
</div>
<div class="lg:w-1/2 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0">
<h2 class="text-sm title-font text-gray-500 tracking-widest">BRAND NAME</h2>
<h1 class="text-gray-900 text-3xl title-font font-medium mb-1">The Catcher in the Rye</h1>
<p class="leading-relaxed">Fam locavore kickstarter distillery. Mixtape chillwave tumeric sriracha
taximy chia microdosing tilde DIY. XOXO fam indxgo juiceramps cornhole raw denim forage
brooklyn. Everyday carry +1 seitan poutine tumeric. Gastropub blue bottle austin listicle
pour-over, neutra jean shorts keytar banjo tattooed umami cardigan.</p>
<div class="flex mt-6 items-center pb-5 border-b-2 border-gray-100 mb-5">
<div class="flex">
<span class="mr-3">Color</span>
<button class="border-2 border-gray-300 rounded-full w-6 h-6 focus:outline-none"></button>
<button
class="border-2 border-gray-300 ml-1 bg-gray-700 rounded-full w-6 h-6 focus:outline-none"></button>
<button
class="border-2 border-gray-300 ml-1 bg-indigo-500 rounded-full w-6 h-6 focus:outline-none"></button>
</div>
<div class="flex ml-6 items-center">
<span class="mr-3">Size</span>
<div class="relative">
<select
class="rounded border appearance-none border-gray-300 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 text-base pl-3 pr-10">
<option>SM</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<span
class="absolute right-0 top-0 h-full w-10 text-center text-gray-600 pointer-events-none flex items-center justify-center">
<svg fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" class="w-4 h-4" viewBox="0 0 24 24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</div>
</div>
</div>
<div class="flex">
<span class="title-font font-medium text-2xl text-gray-900">$58.00</span>
<button
class="flex ml-auto text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">Button</button>
<button
class="rounded-full w-10 h-10 bg-gray-200 p-0 border-0 inline-flex items-center justify-center text-gray-500 ml-4">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-5 h-5" viewBox="0 0 24 24">
<path
d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z">
</path>
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
you have to put image into div and add class overflow-hidden and w-full or simply you can replce this code.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | RedRex |
| Solution 2 | |
| Solution 3 |