Q:

add different text under each image in inline list with link

As I said in the title I need to add a different text under each image
these images are contained in a list and displayed as inline
and connected to a link.
so I need to keep both image and text connected to the same link.
I tried this method but the images appear in the form of a vertical list.

a, figure {
    display: inline-block;
}
figcaption {
    margin: 10px 0 0 0;
    font-variant: small-caps;
    font-family: Arial;
    font-weight: bold;
    color: #bb3333;

}
figure {
    padding: 5px;
}


img:hover {
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
}
img {
    transition: transform 0.2s;
    -webkit-transition: -webkit-transform 0.2s;
    -moz-transition: -moz-transform 0.2s;
    -o-transition: -o-transform 0.2s;
}



.photos{
  list-style-type: none;
  padding: 0;
  text-align: center;

}


.photos li{
  display: inline;
  padding: 11px;

}  


.photos img{
  width: 20%;

}
<ul class='photos'> 
            <li><figure>
<a href='first link'><img src='http://4.bp.blogspot.com/-dmLOX0bmJbU/U0iOwbZwCrI/AAAAAAAAGp8/4wCYHr5n5Fk/s1600/BeIN_Sports.png'/>            <figcaption>BeIN1</figcaption>
</a>
</figure></li>
            <li><figure>
<a href='second link'><img src='http://4.bp.blogspot.com/-dmLOX0bmJbU/U0iOwbZwCrI/AAAAAAAAGp8/4wCYHr5n5Fk/s1600/BeIN_Sports.png'/>            <figcaption>BeIN2</figcaption>
</a>
</figure></li>
            <li><figure>
<a href='third link'><img src='http://4.bp.blogspot.com/-dmLOX0bmJbU/U0iOwbZwCrI/AAAAAAAAGp8/4wCYHr5n5Fk/s1600/BeIN_Sports.png'/>            <figcaption>BeIN3</figcaption>
</a>
</figure></li>
            <li><figure>
<a href='fourth link'><img src='http://4.bp.blogspot.com/-dmLOX0bmJbU/U0iOwbZwCrI/AAAAAAAAGp8/4wCYHr5n5Fk/s1600/BeIN_Sports.png'/>
            <figcaption>BeIN4</figcaption>
        

</a></figure>
</li>
</ul>

A:

If you want 20% width set your <li> elements to width: 20% and display: inline-block and then change your <img> width to 100%.  Also, the snippet editor has a tidy button.  I recommend using it and/or getting used to formatting your code with proper indentation.  This can really help get a visual structure of your code and where things might be going wrong:

a,
figure {
  display: inline-block;
}
figcaption {
  margin: 10px 0 0 0;
  font-variant: small-caps;
  font-family: Arial;
  font-weight: bold;
  color: #bb3333;
}
figure {
  padding: 5px;
}
img:hover {
  transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}
img {
  transition: transform 0.2s;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -o-transition: -o-transform 0.2s;
}
.photos {
  list-style-type: none;
  padding: 0;
  text-align: center;
}
.photos li {
  display: inline-block;
  width: 20%;
  padding: 11px;
}
.photos img {
  width: 100%;
}
<ul class='photos'>
  <li>
    <figure>
      <a href='first link'>
        <img src='http://4.bp.blogspot.com/-dmLOX0bmJbU/U0iOwbZwCrI/AAAAAAAAGp8/4wCYHr5n5Fk/s1600/BeIN_Sports.png' />
        <figcaption>BeIN1</figcaption>
      </a>
    </figure>
  </li>
  <li>
    <figure>
      <a href='second link'>
        <img src='http://4.bp.blogspot.com/-dmLOX0bmJbU/U0iOwbZwCrI/AAAAAAAAGp8/4wCYHr5n5Fk/s1600/BeIN_Sports.png' />
        <figcaption>BeIN2</figcaption>
      </a>
    </figure>
  </li>
  <li>
    <figure>
      <a href='third link'>
        <img src='http://4.bp.blogspot.com/-dmLOX0bmJbU/U0iOwbZwCrI/AAAAAAAAGp8/4wCYHr5n5Fk/s1600/BeIN_Sports.png' />
        <figcaption>BeIN3</figcaption>
      </a>
    </figure>
  </li>
  <li>
    <figure>
      <a href='fourth link'>
        <img src='http://4.bp.blogspot.com/-dmLOX0bmJbU/U0iOwbZwCrI/AAAAAAAAGp8/4wCYHr5n5Fk/s1600/BeIN_Sports.png' />
        <figcaption>BeIN4</figcaption>
      </a>
    </figure>
  </li>
</ul>

