I am struggling to figure out why my figcaption is not positioning correctly.
My image is set to relative position.
Meanwhile, my figcaption has been set to absolute positioning.
This should mean that the figcaption with a bottom: 60px should be positioned at 60px from the bottom of the image.
However, I'm encountering an issue where the figcaption is taking the window as a relative, rather than the actual image itself.
Code Snippet:
<li class="item">
<figure><%= image_tag photo.photo_url(:thumb), class: "spot-image" %>
<figcaption class="spot-item-title">
<h4><%= photo.title.truncate(30).downcase.capitalize %></h4>
<span><%= photo.pins.count %> Productos etiquetados</span>
</figcaption>
</figure>
</li>
Sass Code:
.item {
@include span-columns(3);
@include omega(3);
background: $spot-bg;
.spot-image {
border: 4px solid red;
position: relative;
}
.spot-item-title {
position: absolute;
bottom: 60px;
}
}
CSS Output (Edited):
.item {
float: left;
display: block;
margin-right: 2.35765%;
width: 23.23176%;
background: #f3f3f3;
.item .spot-image {
position: relative;
border: 4px solid red;
.item .spot-item-title {
position: absolute;
bottom: 60px;}