Kevin Powell - Community•2w ago

Overlaying half of a logo on top of an image

I'm trying to get half of the 'RixtMixt' logo to be on top of the first image, as seen in the design (1st image attached). My previous attempts resulted in the section overflowing, or there being some weird whitespace. The section needs to be 100vh. Here's the code (Astro & Tailwind):

<section
  id="streetwear"
  class="flex flex-col justify-between md:h-svh px-4 md:px-12 py-7"
>
  <Logo outline={true} />

  <div class="flex flex-wrap flex-col md:flex-row gap-4">
    {
      [
        {
          src: streetwear1,
          alt: "Person wearing the '?!' socks and yellow Adidas shoes",
          text: '?!',
        },
        {
          src: streetwear2,
          alt: "Person wearing the 'Shine' socks and lightblue Adidas shoes",
          text: 'Shine',
        },
        {
          src: streetwear3,
          alt: "Person on a bike wearing the 'Sunny Side Up' socks and green Nike shoes",
          text: 'Sunny side up',
        },
      ].map(item => (
        <div class="uppercase flex-1 text-orange">
          <Image
            src={item.src}
            class="w-full md:w-auto object-cover"
            alt={item.alt}
          />
          <span>{item.text}</span>
        </div>
      ))
    }
  </div>
</section>

13 Replies

vinter.•2w ago

It's a bit hard to test your specific case without a codepen but this should be what you're looking for

<div class="image>
  <div class="logo"></div>
</div>

<div class="image>
  <div class="logo"></div>
</div>

.image { position: relative; }
.logo { 
  position: absolute;
  top: 0px;
  left: 0px;
  transform: translateY(-50%);
}

.image { position: relative; }
.logo { 
  position: absolute;
  top: 0px;
  left: 0px;
  transform: translateY(-50%);
}

In your case it would probably be

<section
  id="streetwear"
  class="flex flex-col justify-between md:h-svh px-4 md:px-12 py-7 relative"
>
  <Logo outline={true} class="absolute left-0 top-0 -translate-y-[50%]" />
  ///

<section
  id="streetwear"
  class="flex flex-col justify-between md:h-svh px-4 md:px-12 py-7 relative"
>
  <Logo outline={true} class="absolute left-0 top-0 -translate-y-[50%]" />
  ///

snxxwyy•2w ago

You can do it with grid to avoid any responsive issues with position absolute. But if you don’t want to use grid you can just give the image gallery a negative margin top

TheBugCoderOP•2w ago

Thanks! :) with this solution the padding is gone though, when I add it into the 'top' and 'left', the images and text are vertically overflowing how would you do it with grid?

snxxwyy•2w ago

something like this

.grid {
  display: grid;
  grid-template-rows: auto 25px auto;
}

.grid > * {
  grid-column: 1 / 2;
}

.logo {
  grid-row: 1 / 3;
}

.images {
  grid-row: 2 / 4;
}

.grid {
  display: grid;
  grid-template-rows: auto 25px auto;
}

.grid > * {
  grid-column: 1 / 2;
}

.logo {
  grid-row: 1 / 3;
}

.images {
  grid-row: 2 / 4;
}

TheBugCoderOP•2w ago

thank you so much, but when the screen is a little bit smaller you get this: would there be any way to fix that?

snxxwyy•2w ago

can you put it in a codepen please

TheBugCoderOP•2w ago

https://codepen.io/thebugcoder/pen/EaYKGJr here you go

TheBugCoder

CodePen

Untitled

...

TheBugCoderOP•2w ago

i replaced the images with placeholders

snxxwyy•2w ago

it's because your logo has a fixed height, if you turn on grid lines you'll notice that it doesn't entirely fill the container, try giving it a height of 100%. You might have to play around with the width and stuff though for that since it'll make it large in some instances

b1mind•2w ago

Its actually a good ol curse of the 100vh and not having a fraction or % to help fill it also having the flex children (not really using wrap anyway when you swap it to column) becaues flex will make children dense by default grid-template-rows: auto 76px 1fr; mostly fixes it but not sure what you are after fully

snxxwyy•2w ago

Hm interesting, so because it doesn’t really have a definite size, items aren’t sized based off of the space in the container?

b1mind•2w ago

sorry not sure the question but I'm tired. The spacing issue is because it needed 1fr to "push" the content up and auto to squish so giving it a height is going to make things do auto things 🤷‍♂️ having the 1fr or a % will push the content. Another option would be to set the first row to max-content then it does not care about the rest of the defined rows it will just be the size of its content. I'm not sure if they intended to fill the 100vh (please use svh/lvh) with the 3 images though.

TheBugCoderOP•2w ago

ohh thx it works now 👍

Gaming

Programming

Overlaying half of a logo on top of an image