1 Correct answer
You need to float the 'figure' element that the image is contained within, NOT the image itself.
/* FLOAT FIGURE ELEMENT */
.wrapimage-right-50 figure {
position: relative;
float: right;
margin: 0;
margin-left: 20px;
width: 50%;
}
/* ADD BELOW TO PREVENT IMAGE SPILLING OUT OF FIGURE ELEMENT */
.wrapimage-right-50 img {
max-width: 100%;
}
/* THEN UPDATE THE CSS SELECTORS BELOW */
/*TOP LEFT*/
.imagetext_topleft {
top: 10px;
left: 10px;
position: absolute;
color: blue
}
/*TOP RIGHT*/
.imagetext_topright {
top: 10px;
23
Replies
I realize now you want 4 captions OUCH!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>4 Figure Captions</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
figure.overlay {
position: relative;
z-index: 1;
/**same size as image**/
height: 600px;
width: 900px;
}
figure.overlay img {
height:600px;
width: 900px;
}
figure.overlay figcaption {
position: absolute;
z-index: 1000;
font-weight: 700;
text-shadow: 2px 1px 1px #000, 0 0 15px #FFF;
font-size: 24px;
}
/**adjust values as required**/
.tp-lt{top: 25px; left: 12px; color:whitesmoke;}
.tp-rt{top: 25px; left:700px; color:aquamarine;}
.bt-lt{top:550px; left: 12px; color:orchid;}
.bt-rt{top: 550px; left:700px; color: lightsalmon}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita odio, debitis mollitia quod dolores at ipsa corrupti quas numquam assumenda illum, sunt rerum amet consectetur possimus veniam aliquam velit.</p>
<figure class="overlay">
<img src="https://placeimg.com/900/600/people/1" alt="person">
<figcaption class="tp-lt"> Figcaption tp-lt</figcaption>
<figcaption class="tp-rt"> Figcaption tp-rt</figcaption>
<figcaption class="bt-lt"> Figcaption bt-lt</figcaption>
<figcaption class="bt-rt"> Figcaption bt-rt</figcaption>
</figure>
</div>
</body>
</html>
OK. This version is floated AND responsive.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>4 Figure Captions</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.wrap {position:relative; border:1px dotted silver;}
figure {float:right}
figure.overlay {
position: relative;
z-index: 1;
border:4px solid red;
box-sizing: border-box;
}
figure.overlay img {
height:100%;
width: 100%;
}
figure.overlay figcaption {
position: absolute;
z-index: 1000;
font-weight: 700;
text-shadow: 2px 1px 1px #000, 0 0 15px #FFF;
font-size: 3.0vw;
}
/**adjust values as required**/
.tp-lt{top: 5%; left: 2%; color:whitesmoke;}
.tp-rt{top: 5%; left:68%; color:aquamarine;}
.bt-lt{top:86%; left: 2%; color:orchid;}
.bt-rt{top:86%; left:68%; color: lightsalmon}
</style>
</head>
<body>
<div>
<p class="wrap">
<figure class="overlay">
<img src="https://placeimg.com/900/600/people/1" alt="person">
<figcaption class="tp-lt"> Figcaption tp-lt
</figcaption>
<figcaption class="tp-rt"> Figcaption tp-rt
</figcaption>
<figcaption class="bt-lt"> Figcaption bt-lt
</figcaption>
<figcaption class="bt-rt"> Figcaption bt-rt
</figcaption>
</figure>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita odio, debitis mollitia quod dolores at ipsa corrupti quas numquam assumenda illum, sunt rerum amet consectetur possimus veniam aliquam velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita odio, debitis mollitia quod dolores at ipsa corrupti quas numquam assumenda illum, sunt rerum amet consectetur possimus veniam aliquam velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita odio, debitis mollitia quod dolores at ipsa corrupti quas numquam assumenda illum, sunt rerum amet consectetur possimus veniam aliquam velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita odio, debitis mollitia quod dolores at ipsa corrupti quas numquam assumenda illum, sunt rerum amet consectetur possimus veniam aliquam velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita odio, debitis mollitia quod dolores at ipsa corrupti quas numquam assumenda illum, sunt rerum amet consectetur possimus veniam aliquam velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita odio, debitis mollitia quod dolores at ipsa corrupti quas numquam assumenda illum, sunt rerum amet consectetur possimus veniam aliquam velit.</p>
</div>
</body>
</html>
OK. This version is floated AND responsive.
By @Nancy OShea
Thanks Nancy - That looks spot-on. Will take me a while to absorb the details (z-index etc.) Actually, the reason I have 4 captions is that I thought I had it solved the other night and it turned out it was a fluke that one of the captions appeared where it "should" be. When I added the others I realised I was on the wrong track.
You need to float the 'figure' element that the image is contained within, NOT the image itself.
By @osgood_
Thanks - That's just what I was trying to do to keep the elements together. I tried a bunch of variations but it never quite clicked.
By @Galeodan
No problem, its nice to see someone in the forum taking an actual interest in what they are doing for a change and using the traditional workflow instead of resorting to frameworks........thats the way you will learn faster and be able to solve more issues in the future.
OK. getting personal again. In that case how can you mislead the OP by saying
.wrapimage-right-50 figure {
position: relative;
float: right;
margin: 0;
margin-left: 20px;
width: 50%;
}
This ties the `figure` down to a width of `50%`, meaning that you would have to create a class for each different sized image. And to think that this answer was marked as `correct`.
The correct way is to display `figure` as an `inline-block` causing it to automatically adjust to the intrinsic size of the image.
OK. getting personal again. In that case how can you mislead the OP by saying
.wrapimage-right-50 figure {
position: relative;
float: right;
margin: 0;
margin-left: 20px;
width: 50%;
}
This ties the `figure` down to a width of `50%`, meaning that you would have to create a class for each different sized image. And to think that this answer was marked as `correct`.
The correct way is to display `figure` as an `inline-block` causing it to automatically adjust to the intrinsic size of the image.
inline-block won't limited the image to be 100% of its container. If I set the image to a specific size like 400px or 300px you can use inline block but then the image/container is NOT responsive...........so to say its misleading/incorrect to set the container to a percentage size is incorrect. Generally you would want to use a larger image than is necessary to cater for smaller screen devices where the image is likey going to be full width of the screen, unless of course you switch out the images using scrset or javascript..........but hey its a matter of choice and how you are setting the construction up for various senarios.
I'm not being personal, just making observations which no-one really can usually be bothered to anwser or address because generally they are observations which developers like to forget, those that use framework/niche workflows.
In the case of your Bootstrap example you forget to mention that you are using thousands of lines of unneeded css in the default Bootstrap css file just to do something which take a few lines of css and a few kbs.
If only the images physical size could be recalculated without loss of data on the fly we could just use the one image, l wonder if that will ever happen.
By @osgood_
Upload the image(s) to an S3 bucket and use
<img
srcset="
{BUCKET}/600x600/theshot.jpg 600w,
{BUCKET}/1000x1000/theshot.jpg 1000w,
{BUCKET}/3000x3000/theshot.jpg 3000w
"
src="{BUCKET}/600x600/theshot.jpg"
>For more, see https://medium.com/frontend-at-scale/resize-images-on-the-fly-with-s3-lambda-and-api-gateway-36032f4...
The process is super easy when using the correct IDE.
To add to the above, I had thought of using Sharp, but this requires saving the resized images, thus adding to storage.
Here I have created just the one image size and removed the original image to save space:
All too easy when using the correct IDE.
...
Use less css. You DONT need to add a class "textonimage" to the figure element......
<figure class="textonimage">
<img src="https://www.dummyimage.com/1600x800/" alt="Portrait">
<div class="imagetext-topleft"> Text Top Left </div>
<div class="imagetext-topright"> Text Top Right</div>
<div class="imagetext-btmleft" > Text Bottom Left - Higher - Why?</div>
<div class="imagetext-btmright"> Text Bottom Right</div>
</figure>
.......as you are already declaring the same attribute 'position: relative;' which targets the figure element in the wrapimage-right-70 container:
.wrapimage-right-70 figure {
position: relative;
float: right;
margin: 0;
margin-left: 20px;
width: 70%;
}
So the below selctors are redundant as you have already declared the figure element to have a 'position of relative' in the 'wrapimge-right-70 figure' css selector........so delete or comment out the below:
/* Comment out or delete */
.textonimage {
position: relative;
}.......
By @osgood_
Hi Osgood - This is really ancient history by now - I have only just got back on my own PC. I have applied most of the recommended changes and the output is what I was seeking. Regarding the .textonimage selector, I see can see how the very first image does not need it because it is in the wrapimage-right-70 img selector, as you point out. But it seems to me that the other images do need that selector as their text still needs to be set "relative". If I delete the .textonimage selector, as suggested, the text is no longer contained in any of the other images. Or perhaps I misunderstood your meaning there.
...
Use less css. You DONT need to add a class "textonimage" to the figure element......
<figure class="textonimage">
<img src="https://www.dummyimage.com/1600x800/" alt="Portrait">
<div class="imagetext-topleft"> Text Top Left </div>
<div class="imagetext-topright"> Text Top Right</div>
<div class="imagetext-btmleft" > Text Bottom Left - Higher - Why?</div>
<div class="imagetext-btmright"> Text Bottom Right</div>
</figure>
.......as you are already declaring the same attribute 'position: relative;' which targets the figure element in the wrapimage-right-70 container:
.wrapimage-right-70 figure {
position: relative;
float: right;
margin: 0;
margin-left: 20px;
width: 70%;
}
So the below selctors are redundant as you have already declared the figure element to have a 'position of relative' in the 'wrapimge-right-70 figure' css selector........so delete or comment out the below:
/* Comment out or delete */
.textonimage {
position: relative;
}.......
By @osgood_
I see can see how the very first image does not need it because it is in the wrapimage-right-70 img selector, as you point out. But it seems to me that the other images do need that selector as their text still needs to be set "relative". If I delete the .textonimage selector, as suggested, the text is no longer contained in any of the other images. Or perhaps I misunderstood your meaning there.
By @Galeodan
I don't recall what is the first image and what the other images are. I'm saying you dont need to add '.textonimage' css class to figure elements which are inside the '.wrapimage-right-70' container as they already have a position: relative; set.
So the class in red in the situation below is redundant.....
<div class="wrapimage-right-70">
<figure class="textonimage">
<img src="https://www.dummyimage.com/1600x800/" alt="Portrait">
<div class="imagetext-topleft"> Text Top Left </div>
<div class="imagetext-topright"> Text Top Right</div>
<div class="imagetext-btmleft" > Text Bottom Left - Higher - Why?</div>
<div class="imagetext-btmright"> Text Bottom Right</div>
</figure>
</div>
.....as 'position: relative;' has already been set in the below css selector.
.wrapimage-right-70 figure {
position: relative;
float: right;
margin: 0;
margin-left: 20px;
width: 70%;
}
If you have a situation like below where the figure tag is NOT wrapped in '.wrapimage-right-70 ' container then you need to apply the css selector '.textonimage'
<figure class="textonimage">
<img src="https://www.dummyimage.com/1600x800/" alt="Portrait">
<div class="imagetext-topleft"> Text Top Left </div>
<div class="imagetext-topright"> Text Top Right</div>
<div class="imagetext-btmleft" > Text Bottom Left - Higher - Why?</div>
<div class="imagetext-btmright"> Text Bottom Right</div>
</figure>
Hope that makes things a little clearer.
AdChoices