Html - I need solution for overlapping item image on top of another?

SebastianPendragon
September 20, 2024
56 views
0 votes
2 Answers

I’m trying to make a streaming service website as practice, but the problem is when I put images, titles and episode lists in a way like columns and rows. For the image on top over I, tried changing the margin or other things but it didn’t work.

I tried to change the margin, and perhaps put a container on it but it didn’t work, I want it to be like this:
existing streaming service

It ended up lining up. Likes this:
My Streaming Service

I want to line up at least four columns containing a poster, title and episode. At first, the row is ok but the second and further overlaps on top of the first. This is the code:

.column {
  background-color: rgb(249, 215, 142);
  float: left;
  width: 200px;
  padding: 20px;
  height: 200px;
  grid-template-columns: 1fr 1fr 1fr;
}

.row:after {
  content: "";
  display: grid;
  clear: both;
  
}

<div class="row">

  <div class="column">
    <img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Oshi No Ko Season 2.jpg" 
    style="width:200px;height:270px; margin-bottom:10px; margin-right: 15px; border:none;">
<p class="video-title">Oshi No Ko Season 2</p>
<p class="video-episode">Episode 1</p>
<p class="video-title">Sub</p>
</img>
</div>

<div class="column">
  <img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Failure Frame Season 1.jpg" 
  alt="Failure Frame Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
</img>
  <p class="video-title">Failure Frame</p>
<p class="video-episode">Season 1 Episode 1</p>
<p class="video-title">Sub</p>

</div>

<div class="column">
  <img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Vanguard Divinez Season 2.jpg" 
  alt="Vanguard Divinez Season 2" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
</img>
  <p class="video-title">Vanguard Divinez Season 2</p>
<p class="video-episode">Episode 1</p>
<p class="video-title">Sub</p>

  </div>

  <div class="column">
    <img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Alya Sometimes Hides Her Feelings in Russian Season 1.jpg" 
    alt="Alya Sometimes Hides Her Feelings in Russian Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
    <p class="video-title">Alya Sometimes Hides Her Feelings in Russian Season 1</p>
  <p class="video-episode">Episode 1</p>
  <p class="video-title"> Dub|Sub</p>
  </img>
    </div>

    <div class="column">
      <img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/7th Time Loop The Villainess Enjoys a Carefree Life Married to Her Worst Enemy.jpg" 
      alt="7th Time Loop The Villainess Enjoys a Carefree Life Married to Her Worst Enemy Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
      <p class="video-title">7th Time Loop The Villainess Enjoys a Carefree Life Married to Her Worst Enemy Season 1</p>
    <p class="video-episode">Episode 1</p>
    <p class="video-title">Sub</p>
    </img>
      </div>
 
      <div class="column">
        <img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/As A Reincarnated Aristocrat I'll Use My Appraisal Skill to Rise in The World.jpg" 
        alt="As A Reincarnated Aristocrat I'll Use My Appraisal Skill to Rise in The World Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
        <p class="video-title">As A Reincarnated Aristocrat I'll Use My Appraisal Skill to Rise in The World Season 1</p>
      <p class="video-episode">Episode 1</p>
      <p class="video-title"> Dub|Sub</p>
      </img>
        </div>

        <div class="column">
          <img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Chillin' in Another World with Level 2 Cheats.jpg" 
          alt="Chillin' in Another World with Level 2 Cheats Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
          <p class="video-title">Chillin' in Another World with Level 2 Cheats Season 1</p>
        <p class="video-episode">Episode 1</p>
        <p class="video-title"> Dub|Sub</p>
        </img>
          </div>

          <div class="column">
            <img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Fairy Tail 100 Years Quest.jpg" 
            alt="Fairy Tail 100 Years Quest Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
            <p class="video-title">Fairy Tail 100 Years Quest Season 1</p>
          <p class="video-episode">Episode 1</p>
          <p class="video-title"> Dub|Sub</p>
          </img>
            </div>

            <div class="column">
              <img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/I Parry Everything.jpg" 
              alt="I Parry Everything Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
              <p class="video-title">I Parry Everything Season 1</p>
            <p class="video-episode">Episode 1</p>
            <p class="video-title"> Dub|Sub</p>
            </img>
              </div>

</div>

Anyone know how to fix it.

Tags: css html

Answers

Use a responsive grid, adjusting the 10em value lower for smaller tiles and higher for larger tiles.

.d1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
}

body {
  margin: 1em;
}

.d1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
  gap: 1em;
}

.d1 > div {
  background-color: rgb(249, 215, 142);
}

.d1 img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

<div class="d1">

<div>
<img src="https://picsum.photos/250/370">
<p class="video-title">Oshi No Ko Season 2</p>
<p class="video-episode">Episode 1</p>
<p class="video-title">Sub</p>
</div>

<div>
<img src="https://picsum.photos/251/370">
<p class="video-title">Failure Frame</p>
<p class="video-episode">Season 1 Episode 1</p>
<p class="video-title">Sub</p>
</div>

<div>
<img src="https://picsum.photos/252/370">
<p class="video-title">Vanguard Divinez Season 2</p>
<p class="video-episode">Episode 1</p>
<p class="video-title">Sub</p>
</div>

<div>
<img src="https://picsum.photos/253/370">
<p class="video-title">Alya Sometimes Hides Her Feelings in Russian Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title"> Dub|Sub</p>
</div>

<div>
<img src="https://picsum.photos/254/370">
<p class="video-title">7th Time Loop The Villainess Enjoys a Carefree Life Married to Her Worst Enemy Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title">Sub</p>
</div>

<div>
<img src="https://picsum.photos/255/370">
<p class="video-title">As A Reincarnated Aristocrat I'll Use My Appraisal Skill to Rise in The World Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title"> Dub|Sub</p>
</div>

<div>
<img src="https://picsum.photos/256/370">
<p class="video-title">Chillin' in Another World with Level 2 Cheats Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title"> Dub|Sub</p>
</div>

<div>
<img src="https://picsum.photos/257/370">
<p class="video-title">Fairy Tail 100 Years Quest Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title"> Dub|Sub</p>
</div>

<div>
<img src="https://picsum.photos/258/370">
<p class="video-title">I Parry Everything Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title"> Dub|Sub</p>
</div>

</div>

try to use flex.
This will make the site more responsive.
And be more careful when closing tags. in your case <img >

An example of the use of flex:
HTML

<div class="movie">
  <img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Oshi No Ko Season 2.jpg"/> 
  <p class="video-title">Oshi No Ko Season 2</p>
  <p class="video-episode">Episode 1</p>
  <p class="video-title">Sub</p>
</div>

<div class="movie">
  <img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Failure Frame Season 1.jpg" 
    alt="Failure Frame Season 1"/>
  <p class="video-title">Failure Frame</p>
  <p class="video-episode">Season 1 Episode 1</p>
  <p class="video-title">Sub</p>
</div>

<div class="movie">
  <img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Vanguard Divinez Season 2.jpg" 
  alt="Vanguard Divinez Season 2"/>
  <p class="video-title">Vanguard Divinez Season 2</p>
  <p class="video-episode">Episode 1</p>
  <p class="video-title">Sub</p>
</div>

<div class="movie">
  <img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Alya Sometimes Hides Her Feelings in Russian Season 1.jpg" 
    alt="Alya Sometimes Hides Her Feelings in Russian Season 1"/>
  <p class="video-title">Alya Sometimes Hides Her Feelings in Russian Season 1</p>
  <p class="video-episode">Episode 1</p>
  <p class="video-title"> Dub|Sub</p>
</div>

<div class="movie">
  <img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/7th Time Loop The Villainess Enjoys a Carefree Life Married to Her Worst Enemy.jpg" 
  alt="7th Time Loop The Villainess Enjoys a Carefree Life Married to Her Worst Enemy Season 1"/>
  <p class="video-title">7th Time Loop The Villainess Enjoys a Carefree Life Married to Her Worst Enemy Season 1</p>
  <p class="video-episode">Episode 1</p>
  <p class="video-title">Sub</p>
</div>

<div class="movie">
  <img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/As A Reincarnated Aristocrat I'll Use My Appraisal Skill to Rise in The World.jpg" 
    alt="As A Reincarnated Aristocrat I'll Use My Appraisal Skill to Rise in The World Season 1" />
  <p class="video-title">As A Reincarnated Aristocrat I'll Use My Appraisal Skill to Rise in The World Season 1</p>
  <p class="video-episode">Episode 1</p>
  <p class="video-title"> Dub|Sub</p>
</div>

CSS

.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.movie {
  width: 300px;
  margin: 1rem;
  background-color: rgb(249, 215, 142);
  position: relative;
  overflow: hidden;
  border-radius: 3px;
}

img {
    width: 100%;
}

Please signup or login to give your own answer.

Click here to cancel reply.

Html – I need solution for overlapping item image on top of another?

Answers