CSS Hover Image Description Alignment

Hi everyone,

Okay, so I’ve wrassled with this for the better part of three hours without any success, so I’m hoping you fine folks can point me in the right direction.

You can see here: http://element17.com/trunk/index.php?level=picture&id=3 and here: http://element17.com/trunk/index.php?level=picture&id=6 that I’ve implemented a CSS-based hover description that SHOULD be aligned to the bottom-right corner of the image. I’ve, however, been unsuccessful in actually getting it to do so. PHP is as follows:

<div id="picture-holder"><div style="width:<?php echo get_image_width(plogger_get_picture_id()); ?>;"><img class="photos-large" src="<?php echo plogger_get_picture_thumb(THUMB_LARGE); ?>" alt="<?php echo $capt; ?>" />
		<div class="exif-data"><h2><?php echo $picture_caption; ?></h2><?php echo plogger_get_picture_date(); ?><br /><div id="exif"><?php echo generate_exif_table(plogger_get_picture_id()); ?></div></div>
		</div>
			   </div>

And the corresponding CSS is here:

#picture-holder {
	clear: both;
	text-align: center;
	overflow:hidden;
	position:relative;
	margin:25px 0;
}
#picture-holder div:hover .exif-data{
	text-align:right;
	display: block;
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
	color: #fff;
	position: absolute;
	bottom: 0px;
	right: 0px;
	padding: 5px;
}
#picture-holder div .exif-data{
	display:none;
}
.photos-large {
display:block;
margin:0 auto;
}

I initially had the images centered horizontally but that broke at some point while I was mucking about trying to get the hover aligned to the corner of the image. I finally tried resorting to actually sizing the surrounding DIV to the width of the image, but that doesn’t seem to be working either…

Can anyone help? Thanks very much!

The basics of your css is not wrong (picture-holder: position: relative, caption: postion: absolute) except that #picture-holder has the same width as #wrapper 980px. So the caption is doing what you have declared in your CSS it is aligning bottom right. You need to give #picture-holder a width:


#picture-holder {
    clear: both;
    margin: 25px 0;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 631px;/* Add this */
}

and remove the extra div inside #picture-holder:


<div id="picture-holder"><!-- Remove <div style="width:631px;"> -->

Agh! That’s done it, of course. Thank you very much; sometimes you need a fresh pair of eyes…

You’re right. Sometimes you look at things to long, and you simply don’t see it any more. I just woke up and had a cup of :coffee: so, indeed I had a fresh look :wink:

Okay, maybe you can help me with the next phase of my plans…

I’d like to subdivide the hover so that there’s a 50px band on either side of the image (on the inside, though) to use as a next-image/previous-image button… How could I do this?

The newly-simplified PHP looks like this:

<div id="picture-holder" style="width:<?php echo get_image_width(plogger_get_picture_id()); ?>;">
			<img class="photos-large" src="<?php echo plogger_get_picture_thumb(THUMB_LARGE); ?>" alt="<?php echo $capt; ?>" />
			<div class="exif-data">
				<h2><?php echo $picture_caption; ?></h2>
				<?php echo plogger_get_picture_date(); ?><br />
				<div id="exif"><?php echo generate_exif_table(plogger_get_picture_id()); ?></div>
			</div>
		</div>

And the CSS looks like this:

#picture-holder {
	clear: both;
	text-align: center;
	overflow:hidden;
	position:relative;
	margin:25px auto;
}
#picture-holder:hover .exif-data{
	text-align:right;
	display: block;
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
	color: #fff;
	position: absolute;
	bottom: 0px;
	right: 0px;
	padding: 5px;
}
#picture-holder .exif-data{
	display:none;
}

So I’d like something kinda like is being used here: http://dbowman.com/photos/sydney05/gallery/predinner-drinks-bondi-icebergs.php but with the majority of the center of the image being the existing hover for the description… Make sense?

Ooohps. You just removed your old example. And I might be awake, but not to the extend that I remember your current markup. But basically, instead of having the navigation above the picture-holder, you could float the left and right animation with #picture-holder in the middle. At least if I remember well that #picture-holder was floating.

Sorry, have a look here: http://element17.com/index.php?level=picture&id=2

Now, because the #picture-holder element is outside the image, can’t I not make it smaller than the image?

I didn’t say anything about making #picture-holder smaller. The way I see it is. You should float your navigation along side #picture-holder. (one on each side) Right now they are situated above.