images gallery list

images gallery

by Mr_Vasu

HTML

<ul>
  <li>
    <a href="">
      <figure>
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="">
      </figure>
      <div class="content">
        hello tesing
      </div>

    </a>
  </li>
  <li>
    <a href="">
      <figure>
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="">
      </figure>
      <div class="content">
        hello tesing
      </div>
    </a>
  </li>
  <li>
    <a href="">
      <figure>
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="">
      </figure>
      <div class="content">
        hello tesing
      </div>
    </a>
  </li>
  <li>
    <a href="">
      <figure>
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="">
      </figure>
      <div class="content">
        hello tesing
      </div>
    </a>
  </li>
</ul>

SCSS

ul {
  margin: 0;
  padding: 0;
  li {
    list-style: none;
    display: inline-block;
    position: relative;
    figure {
      margin: 0;
      padding: 0;
      img {
        max-width: 100%;
        height: auto;
        display: block;
      }
    }
    .content {
      position: absolute;
      top: 60px;
      right: 0;
      left: auto;
      bottom: 0;
      width: 100%;
      text-align: center;
      font-size: 2em;
      
    }
    a {
      
      &:hover {
        figure {
          &::before {
            content: "";
            position: absolute;
            background-color: rgba(0, 0, 0, 0.5);
            height: 100%;
            width: 100%;
          }
        }
      }
    }
  }
}