T

by rajeevRF

HTML

<section class='section-images clearfix'>
    <ul class='images-showcase'>
      <li>
        <figure class='destination-photo'>
          <img src='https://image.shutterstock.com/image-photo/blue-suitcase-sun-glasses-hat-600w-1094945555.jpg' alt='Image 1'>
          <p>IMAGE TEXT 1</p>
        </figure>
      </li>
      <li>
        <figure class='destination-photo'>
          <img src='https://image.shutterstock.com/image-photo/overhead-view-travelers-accessories-essential-600w-425996818.jpg' alt='Image 2'>
        </figure>
      </li>
      <li>
        <figure class='destination-photo'>
          <img src='https://image.shutterstock.com/image-photo/woman-traveler-suitcase-on-color-600w-578891674.jpg' alt='Image 3'>
        </figure>
      </li>
      <li>
        <figure class='destination-photo'>
          <img src='https://image.shutterstock.com/image-photo/young-couple-planning-honeymoon-vacation-600w-293482145.jpg' alt='Image 4'>
        </figure>
      </li>
    </ul>
    <ul class='images-showcase clearfix'>
      <li>
        <figure class='destination-photo'>
          <img src='https://image.shutterstock.com/image-photo/young-asian-traveler-happy-woman-600w-1570799146.jpg' alt='Image 5'>
        </figure>
      </li>
      <li>
        <figure class='destination-photo'>
          <img src='https://image.shutterstock.com/image-photo/young-asian-traveling-backpacker-khaosan-600w-559055305.jpg' alt='Image 6'>
        </figure>
      </li>
      <li>
        <figure class='destination-photo'>
          <img src='https://image.shutterstock.com/image-photo/flat-lay-yellow-suitcase-traveler-600w-1109787200.jpg' alt='Image 7'>
        </figure>
      </li>
      <li>
        <figure class='destination-photo'>
          <img src='https://image.shutterstock.com/image-photo/travel-world-monument-concept-600w-249702325.jpg' alt='Image 8'>
        </figure>
      </li>
    </ul>
  </section>

CSS

.section-images /*Section that holds the showcase images...*/
{
  padding: 0; /*Removes all padding*/
}
.images-showcase /*Entire <ul> element holding the images*/
{
  list-style: none; /*revmoves all styles such as bullet points*/
  width: 100%; /*cover the entire section element*/
}
.images-showcase li /*<li> elements inside the <ul> element*/
{
  display: block;
  float: left; /*move all to left*/
  width: 25%; /*Because the whole element width is 100% - each element of list should be 25%*/
}
.destination-photo /*Class attached to each image in the showcase*/
{
    width: 100%; /*Scale each image to 100% width*/
    margin: 0; /*remove margin*/
    overflow: hidden; /*When image is out of its contianer this property removes the extra*/
    background-color: #000;
    position:relative;
    /*give it dark background - this way when opacity lowered image gets darker*/
}
.destination-photo img /*Targets only the <img> tag inside the .destenation.photo class*/
{
  opacity: 0.7; /*Opacity is 70%*/
  width: 100%; /*Keep the image width at 100%*/
  height: auto; /*depending on width attribute automaticly scale height*/
  transform: scale(1.15); /*Image is now 115%*/
  transition: transform 0.5s, opacity 0.5s; /*set the transform effect to last for 0.5s - set the opacity effect to last 0.5s*/
}
.destination-photo img:hover /*trigger this section when mouse hovers over the <img> part of this element*/
{
  opacity: 1; /*Set Opacity to 100%*/
  transform: scale(1.03);/*Once hovered image goes (zooms) to 103%*/
}
.section-images p
{
  color: white;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}