HTML – Put text under an image

  • Home / Blog / HTML – Put…

HTML – Put text under an image

.programs_content {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  padding: 20px;
}

.rect-img-container {
  position: relative;
}

.rect-img-container::after {
  content: '';
  display: inline-block;
  padding-bottom: 100%;
}

.rect-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.caption {
  display: block;
}
   <div class="programs_content">
              <div class="rect-img-container">
                <a href="https://stackoverflow.com/questions/68448659/#">
                  <img class="rect-img" src="1.png" alt="" />
                </a>
              </div>
              <span class="caption">text1</span>

              <div class="rect-img-container">
                <a href="https://stackoverflow.com/questions/68448659/#">
                  <img class="rect-img" src="2.png" alt="" />
                </a>
              </div>
              <span class="caption">text2</span>
              
              <div class="rect-img-container">
                <a href="https://stackoverflow.com/questions/68448659/#">
                  <img class="rect-img" src="3.png" alt="" />
                </a>
              </div>
              <span class="caption">text3</span>
              
              <div class="rect-img-container">
                <a href="https://stackoverflow.com/questions/68448659/#">
                  <img class="rect-img" src="4.png" alt="" />
                </a>
              </div>
              <span class="caption">text4</span>
              
            </div>

Write a Comment

Your email address will not be published. Required fields are marked *

x