HTML & CSS What is going on here?

[Silver-Chimes]

Hey all,

So basically to practise html and CSS I've been creating a 'website' based on holidays/vacations etc.

So I'm trying various parts of CSS or html (just to get practise) and have run into some issues.

I've tried out the positioning text in an image, so that text displays over the image (on the left) which seems to work to some extent.
HOWEVER
The image text part appears to the right of the css above, and doesn't move no matter what I do.
Not only that but now all the images are faded out:

    <h2>Images Side by Side</h2>


    <div class="row">

      <div class="column">

      <figure>

        <img src="https://feelarmenia.com/wp-content/uploads/2018/02/karahunj-1024x683.jpg" alt="Karahundj" style="width:350px">

          <figcaption>Karahundj</figcaption>

    </figure>

      </div>

      <div class="row">

      <div class="column">

        <figure>

        <img src="https://d31qtdfy11mjj9.cloudfront.net/places/1511524469250747542.jpg" alt="Noravank Monastery" style="width:350px">

    </figure>

         <figcaption>Noravank</figcaption>

    </div>

      <div class="row">

      <div class="column">

        <figure>

        <img src="https://armenpress.am/static/news/b/2017/06/894869.jpg" alt="Mount Ararat" style="width:350px">

         <figcaption>Mount Ararat</figcaption>

    </figure>

    </div>
</body>

So the above gets affected by the below, by this I mean the images in the above are all faded out, not only that but every single image is faded out.
Then the image from below appears to the right of the above and is squashed up and doesn't change position, no matter what I do.
The below is a continuation from the above:

    <style>

    .container {

      position: relative;

    }


    .topleft {

      position: absolute;

      top: 8px;

      left: 16px;

      font-size: 18px;

    }


    img {

      width: 100%;

      height: auto;

      opacity: 0.3;

    }

    </style>


    <style>

    .container {

      position: relative;

    }


    .topleft {

      position: absolute;

      top: 8px;

      left: 16px;

      font-size: 18px;

    }


    img {

      width: 100%;

      height: auto;

      opacity: 0.3;

    }

    </style>

    </head>

    <body>


    <style>

    .container {

      position: relative;

    }


    .topleft {

      position: absolute;

      top: 8px;

      left: 16px;

      font-size: 18px;

    }


    img {

      width: 100%;

      height: auto;

      opacity: 0.3;

    }

    </style>

    </head>

    <body>


    <h2>Image Text</h2>

    <p>Add some text to an image in the top left corner:</p>


    <div class="container">

      <img src="https://t4.ftcdn.net/jpg/02/01/08/13/360_F_201081303_7TEkhGJLraSEVUnRUPSxaYEYe6jnuR2r.jpg" alt="Colloseum" width="1000" height="300">

      <div class="topleft">Top Left</div>

    </div>


    </body>

I hope that the above is okay, I did read about using the BB code but I've not idea how to use it I'm afraid, so I'm sorry if the above is not acceptable.

 

[LTomy]

Hi Silver-Chimes,

If you want to put elements (Like text) on an image, I recommend to, instead of using an <img>, to apply the image as a background to a html element (Like a <div>):

.backgroundImage1 {
    background-image: url("image1.png");
}

<div class="backgroundImage1">
    <p>The text is on the image.</p>
</div>

I hope that the above is okay, I did read about using the BB code but I've not idea how to use it I'm afraid, so I'm sorry if the above is not acceptable.

Yes and no, click on the </> button and select the language of the code you post 😉.