Reputation: 1029
I am working on a website — a portfolio of my work. On the main page, I have a grid of images; each image is a link to the page for that project.
My issue now is the mouse-hover description text. I want a short description to appear below the image when the user hovers over it.
JSFiddle: http://jsfiddle.net/6crL7df7/
The issue I am having is how I can get the description to appear directly beneath the image. In the prototype, I have manually set bottom: -50px;
, but this needs to be adjusted for different amounts of text. I would like the top of the div to automatically align with the bottom of its image. I saw some answers saying that bottom: 0;
would work, but it didn't for me.
The image itself is float: left;
while the description is position: absolute;
; the div that contains them both is both float: left;
and position: relative;
.
I will gladly take any suggestions to get this to work.
Upvotes: 1
Views: 597
Reputation: 46785
I would make the following adjustment to your CSS rule:
div.description {
color: black;
background-color: white;
font-size: small;
padding: 5px;
border: 1px solid black;
border-radius: 0 0 5px 5px;
position: absolute;
top: 100%; /* set top to be bottom edge of parent block */
margin-top: -5px; /* adjust as needed */
z-index: 1;
visibility: hidden;
}
Specity the top
offset to position the description block below the bottom edge of the
parent block, and then use margin-top
to control the white space (use a negative margin
is so needed).
Note that this is essentially the same as an earlier posted solution.
Upvotes: 1
Reputation: 99474
Spec from W3C:
bottom
specifies how far a box's bottom margin edge is offset above the bottom of the box's containing block.
top
property specifies how far an absolutely positioned box's top margin edge is offset below the top edge of the box's containing block.
Instead of bottom
, use top
property with a value equal or bigger than 100%
.
div.description {
/* other declarations... */
position: absolute;
top: 110%; /* Anything >= 100% */
}
Upvotes: 2