Silver-Chimes
Coder
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:
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:
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.
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:
HTML:
<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:
HTML:
<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.
Last edited by a moderator:
