Search code examples
csstailwind-css

Tailwind CSS: How can I make image pop out of div

Here's the view of my component:

<section className="embla p-6 lg:p-8 flex flex-col gap-4">
      <div className="embla__viewport" ref={emblaRef}>
        <div className="embla__container">
          {slides.map((item: ProductCollectionWithPreviews) => (
            <div className="embla__slide p-5" key={item.products[0].title}>
              <div className="h-[300px] aspect-video bg-gray-400 rounded-md backdrop-blur-xl bg-opacity-5 flex flex-col overflow-visible">
                <div className="h-[150px] flex items-center justify-center overflow-visible">
                  <div className="relative z-10">
                    <Image
                        src={item.products[0].thumbnail}
                        width={300}
                        height={300}
                        alt="Picture of the product"
                        className="skew-y-2 drop-shadow-2xl"
                    />
                  </div>
                </div>
                <div className="h-[150px] flex items-center p-8">
                  <div className="flex flex-col">
                    <span className="text-xl text-white">{item.products[0].title}</span>
                    <span className="text-sm text-slate-200">{item.products[0].title}</span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>

I'm trying to make the image to "pop out" of the div, but all I get is a cut image. Here's what it looks like now:

enter image description here

Solution

  • The div with class embla__viewport has overflow: hidden. Maybe it is cutting your image. But I believe that you can't remove the overflow: hidden because this hides the items from the carousel, I suggest you add a padding-top to make space for the image on embla__viewport.