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 >
<div >
<div >
<img alt="ecommerce" src="https://dummyimage.com/400x400">
<div >
<h2 >BRAND NAME</h2>
<h1 >The Catcher in the Rye</h1>
<p >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 >
<div >
<span >Color</span>
<button ></button>
<button ></button>
<button ></button>
</div>
<div >
<span >Size</span>
<div >
<select >
<option>SM</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<span >
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</div>
</div>
</div>
<div >
<span >$58.00</span>
<button >Button</button>
<button >
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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?
CodePudding user response：
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 >
<img src="" alt=""/>
</div>
Here is the solved snippet:
<script src="https://cdn.tailwindcss.com"></script>
<section >
<div >
<div >
<div >
<img alt="ecommerce" src="https://dummyimage.com/400x400">
</div>
<div >
<h2 >BRAND NAME</h2>
<h1 >The Catcher in the Rye</h1>
<p >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 >
<div >
<span >Color</span>
<button ></button>
<button ></button>
<button ></button>
</div>
<div >
<span >Size</span>
<div >
<select >
<option>SM</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<span >
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</div>
</div>
</div>
<div >
<span >$58.00</span>
<button >Button</button>
<button >
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>CodePudding user response：
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 >
<div >
<img 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 >
<div >
<div >
<!-- Image Container -->
<div >
<img alt="ecommerce" src="https://dummyimage.com/400x400" />
</div>
<!-- END Image Container -->
<div >
<h2 >BRAND NAME</h2>
<h1 >The Catcher in the Rye</h1>
</div>
</div>
</div>
</section>CodePudding user response：
<script src="https://cdn.tailwindcss.com"></script>
<section >
<div >
<div >
<div >
<img alt="ecommerce"
src="https://dummyimage.com/400x400">
</div>
<div >
<h2 >BRAND NAME</h2>
<h1 >The Catcher in the Rye</h1>
<p >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 >
<div >
<span >Color</span>
<button ></button>
<button
></button>
<button
></button>
</div>
<div >
<span >Size</span>
<div >
<select
>
<option>SM</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<span
>
<svg fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</div>
</div>
</div>
<div >
<span >$58.00</span>
<button
>Button</button>
<button
>
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
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.