Placing texts between pictures

Issue

How do i make a scroll-able horizontal line up of round shaped images that originate from a square shaped images with a captions below. And if possible make it seperate each other. Sorry for the bad grammar

Solution

First of all the question is how to structure the elements in HTML before we come to the CSS part. Since you're asking for a line up of multiple elements having a "container - element" structure seems suggestive.

div (container)

    div (element1)
    div (element2)
    div (element3)
    ...

/div

Now we have to put the round image together with the caption below in the element. That's also pretty simple:

div (element)

    img (circular picture)
    div (caption)

/div

Let's translate this into proper HTML

<div class="container">

    <div class="elem">
        <img src=""/>
        <div>Caption #1</div>
    </div>

    <div class="elem">
        <img src=""/>
        <div>Caption #2</div>
    </div>

    <div class="elem">
        <img src=""/>
        <div>Caption #3</div>
    </div>

    ...

</div>

Time to get into CSS. As of right now every element is aligned vertically, not horizontally. One solution I personally really like is Flexbox. It lets you play dynamically with multiple elements which is exactly what we are looking for.

.container {
    display: flex;
    overflow-x: scroll;
}

That's enough to have each Element aligned horizontally as Flexbox structures the items horizontally by default. overflow-x: scroll; prevents the items to resize the web page and will make the container horizontally scrollable as a fix.

The only thing that's left is to make the image circular and that is super easy to do. All we have to do is to add a border-radius which is bigger than the image size itself:

.elem img {
    width: 100px;
    height: 100px;
    border-radius: 500px;
}

Done.

.container {
  display: flex;
  overflow-x: scroll;
}

.elem {
  padding: 8px;
}

.elem img {
  margin: 8px;
  background-color: grey;
  
  height: 100px;
  width: 100px;
  border-radius: 5000px;
}

.elem div {
  text-align: center;
  font-size: 18px;
}

<div class="container">
  <div class="elem">
    <img class="pic" src="https://www.famousbirthdays.com/headshots/justin-bieber-2.jpg" />
    <div>Caption #1</div>
  </div>

  <div class="elem">
    <img/>
    <div>Caption #2</div>
  </div>

  <div class="elem">
    <img/>
    <div>Caption #3</div>
  </div>

  <div class="elem">
    <img/>
    <div>Caption #4</div>
  </div>

  <div class="elem">
    <img/>
    <div>Caption #5</div>
  </div>

  <div class="elem">
    <img/>
    <div>Caption #6</div>
  </div>

  <div class="elem">
    <img/>
    <div>Caption #7</div>
  </div>
</div>

Answered By - Emonadeo