Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Aidan Palmer
5,844 PointsMaking a caption relative to an image.
My code is very jumbled, but the biggest issue I have and continue to encounter is making my image's caption relative to the image. Right now, the caption is relative to the figure containing the caption and the image, but I want the caption relative to just the image so that whenever I move my image around, the caption goes with it Here is my code:
Here is my HTML:
<figure class="clearfix">
<img class="feat-img" src="img/treats.svg" alt="Drinks and eats">
<img class= "icon-location" src="img/location.svg" alt="location">
<figcaption>
<h4>Featured Drinks & Eats!</h4>
Croissant macaroon pie brownie cookie marshmallow liquorice gingerbread caramels toffee.
</figcaption>
</figure>
And here is my CSS:
figure {
margin: 0;
line-height: 0;
position:relative;
}
.feat-img {
float: right;
}
figcaption {
font-size: .9em;
line-height: 1.5;
color: #fff;
padding: 1em;
background: rgba(19,43,102, .65);
position: absolute;
bottom: 0;
right:0;
width: 40%;
}
1 Answer
Steven Parker
243,318 PointsMove the figure instead of the image, and eliminate the "feat-img" class or move it to the figure. You can also remove the "position" property from figcaption, but you may want to add "display: inline-block" to the figure.