I am trying to learn HTML and CSS, and I am still very new to everything about it so this may be a basic question but please bear with me.

I am trying to customize a grid gallery with some text on images. However, I am not happy with my solution for the text because I use negative margins and it doesn't look nice and uniform when the text goes in two rows. Could you help with a better solution for fixing this?

Also, could you tell me how can I transpose columns to rows in this example? Here is a picture of how I would like to change the order of the pictures

Here is my code:

<div >

    <div  >      
        <img src="https://images.unsplash.com/photo-1641381624628-9f3183485c62?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60"/>
        <div > Relax, take it easy </div>
    </div>

    <div  >
        <img src="https://images.unsplash.com/photo-1641330092031-802e02ab9637?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60"/>
        <div > Winter wonderland  </div>
    </div>

    <div  >
        <img src="https://images.unsplash.com/photo-1641394361646-8b87efb3d55f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1fHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60"/>
        <div > My moments </div>
    </div>

    <div  >
        <img src="https://images.unsplash.com/photo-1641406940850-c916b670108d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxM3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"/>
        <div > Breathe in and out in the nature </div>
    </div>

    <div  >
        <img src="https://images.unsplash.com/photo-1641398411489-6cca9623ab5b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyN3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"/>
        <div > Song of the birds</div>
    </div>

    <div  >
        <img src="https://images.unsplash.com/photo-1641294993189-f03fcd61540c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMjV8fHxlbnwwfHx8fA==&auto=format&fit=crop&w=500&q=60"/>
        <div >Enjoy in your car </div>
    </div>

    <div  >
        <img src="https://images.unsplash.com/photo-1641387506793-27f5ba9ef529?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1Nnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"/>
        <div > Nature miracles</div>  
    </div>

    <div  >
        <img src="https://images.unsplash.com/photo-1641290440848-c8b41e4b0727?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw2OXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"/>
        <div > Photography </div>
    </div>

    <div  > 
        <img src="https://images.unsplash.com/photo-1641236247209-0aa78f29d836?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5Mnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"/>
        <div > Animals </div>
    </div>

</div>


<style>

.faimage .titles{
      color: white;
      margin-top: -65px;
      text-align: left;
      position: absolute;
      max-width: 230px;
      font-weight: bold;
      font-size: 20px;
      margin-left: 10px;
      
    }

.grid-container {
  columns: 3 200px;
  column-gap: 1.5rem;
  width: 40%;
  margin: 1.5rem; }
  
  .faimage {
    width: 150px;
    margin: 0 1.5rem 1.5rem 0;
    display: inline-block;
    width: 100%;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
    border-radius: 5px;
    transition: all .3s ease-in-out;
    }

    .faimage:hover img {
      filter: grayscale(0);
    }
    
    .faimage img {
      width: 100%;
      filter: grayscale(100%);
      border-radius: 5px;
      transition: all .3s ease-in-out;
    }

</style>

CodePudding user response：

You don't need to use a negative margin and should never do. In this case, set position: relative; to class faimage which is the parent of titles is the best.

.faimage {
    ...
    position: relative;
  }

.faimage .titles {
    ...
    position: absolute;
    bottom: 40px;

    <!-- 3 lines below make your title look better -->
    background-color: rgba(0, 0, 0, 0.2);
    padding: 4px 16px;
    border-radius: 4px;
  }

Checkout full answer in my codepen.