Clipping photos & content within

My photos have the same width, but different height, and as you can see in the sample photo bellow, what I want to accomplish is to clip all the photos to be exactly 220px (which I did). Then I want to present info related to the photos (title and price), but I want those to be shown within the image surrounded by a little transparent box.

I’ve noticed this kind of CSS solution on different website, but I can’t recall on any at the moment, so that I can see how they do it.

Hi,

You don’t need clip if everything is the same size as you can just hide the overflow.

As Ralph said you can’t have block level elements inside an anchor so you would need to do something like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
a img {
    border:none;
}
.template {
    position: relative;
    height: 220px;
    width:280px;
    overflow:hidden;
    margin:0;
}
.template img {
    display: block;
    position: absolute;
    left:0;
    top:0;
    z-index:1;
}
.template span {
    position: absolute;
    z-index:2;
    bottom: 0px;
    left:0;
    padding: 10px;
    width: 260px;
    height: 20px;
    text-align: right;
    font-size: 18px;
    font-weight: bold;
    background:#000;/* fallback for ie*/
    background: rgba(0, 0, 0, 0.8);
    color: #d3d858;
}
.template b {
    float: left;
    color: #FFF;
    text-align:left;
}
.template a {
    width:280px;
    height:220px;
    text-decoration:none;
    overflow:hidden;
    background:url(fake.gif) no-repeat -1px -1px;/* IE fix - use a 1px transparent gif if you don't want error messages in your server log.*/
}
</style>
</head>
<body>
<h4 class="template"><a href="#"><img src="images/templates/kodu_tmb.png" alt="" />
<span><b>Harmony Effect</b>$520</span></a></h4>
</body>
</html>


Or if you want a better structure it gets more complicated and something like this would be needed.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
a img {
    border:none;
}
.template {
    position: relative;
    height: 220px;
    width:280px;
    overflow:hidden;
    margin:0;
}
.template p, .template div {
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    height: 220px;
    width:280px;
}
.template p{z-index:4}
.template img {
    display: block;
    position: absolute;
    left:0;
    top:0;
    z-index:1;
}
.template h4 {
    position: absolute;
    z-index:2;
    bottom: 0px;
    left:0;
    padding: 10px;
    width: 260px;
    height: 20px;
    text-align: right;
    font-size: 18px;
    font-weight: bold;
    background:#000;/* fallback for ie*/
    background: rgba(0, 0, 0, 0.6);
    color: #d3d858;
    margin:0;
}
.template b {
    float: left;
    color: #FFF;
    text-align:left;
}
.template a {
    width:280px;
    height:220px;
    text-decoration:none;
    position:absolute;
    top:0;
    left:0;
    z-index:3;
    background:url(fake.gif) no-repeat -1px -1px;/* iE fix*/
}
</style>
</head>
<body>
<div class="template">
    <div><img src="images/templates/kodu_tmb.png" alt="" /></div>
    <h4><b>Harmony Effect</b>$520</h4>
    <p><a href="#"></a></p>
</div>
</body>
</html>

Both the above assume that the area is always the same width and height although it doesn’t matter what size the images are as the overflow will be hidden.

You can set the height and width of the box with text in it, give it position: absolute and bottom: 0 to place it where you want.

E.g.

CSS

.imagebox {
    position: relative;
}

p.info {
    height: 30px;
    width: 120px;
    background: rgba(0,0,0,0.8);
    position: absolute;
    bottom: 0;
}

HTML

<div class="imagebox">
    <p class="info"><span>Harmony Effect</span>$520</p>
</div>

Right-align the P text and float the span left…

Yes, but still the imagebox won’t fit in in the bottom space of the image.

Here is the complete HTML for this part:


<div class="template">
	<a href="#">
		<img src="images/templates/kodu_tmb.png" alt="" />
		<div class="imagebox">
			<p class="info"><span>Harmony Effect</span>$520</p>
		</div>
	</a>
</div>

And the CSS so far:


.template {
	position: relative;
  	height: 220px;
}
.template a {
	display: block;
	position: absolute;
  	clip: rect(0px 300px 220px 0px);
}

.imagebox {
    position: relative;
}

p.info {
    height: 30px;
    width: 120px;
    background: rgba(0,0,0,0.8);
    position: absolute;
    bottom: 0;
}

When I checked with Firebug the div.imagebox appears just below the real height of the image, which is around 400px and since the image is clipped it’s not visible beyond 220px and that where the div.imagebox appears - in the invisible area. Now I’m wondering how to forse the div.imagebox to be just above 220px.

I made it :slight_smile:

.template {
	position: relative;
  	height: 220px;
}

.template a {
	display: block;
	position: absolute;
  	clip: rect(0px 300px 220px 0px);
}

.imagebox {
	position: relative;
}

p.info {
	position: absolute;
	bottom: 140px;
	padding: 10px;
	width: 280px;
	height: 20px;
	text-align: right;
	font-size: 18px;
	font-weight: bold;
	background: rgba(0,0,0,0.8);
	color: #d3d858;
    
}

p.info span {
	float: left;
	color: #FFF;
}

Now the only thing I would change is the title to be surrounded with <h4> instead of <span> just for the sake of semantics, but when I change it, it returns in the invisible area, even when I put “display: inline;” for the title.

In reponse to your first reply I would have said: remove the .imagebox div, as that is surplus to need. It is enough for the P to be position absolute in relation to the .template div.

To be honest, I’m no good at debugging without seeing a live view.

But one thing I should say is that it’s not valid HTML to have block-level elements (such as P, DIV and H4) within an A element (which is inline), so it would be good to change that.

As I said, though, for me I’d need to see this live to help any more.

Yes I’m aware that it’s not valid HTML to have block-level elements inside inline-level elements, but I can’t think of any alternative so that I can have the whole image with the information clickable.

I removed the div thought, I noticed that it is surplus too.

This is actually a perfect solution. I’ll try both of them. Thanks!

By the way, how is the IE bug fixed by that “fake.gif” image? What kind of fix is it?

Hi,

Without the bugfix IE6 will change the cursor to the text cursor when over any text in that element and won’t let you click the link.

Adding a non existent image tricks IE into using a different algorithm which corrects the bug. If for instance the anchor had a background color then the whole of the link would be click-able but of course the text underneath would be invisible. Using a non existent image or preferably a 1px x 1px fully transparent gif makes IE6 think it has a background and therefore uses a different rendering routine which doesn’t suffer from the aforementioned bug.

It’s a method I discovered about 8 years ago and have used it many times :wink:

That ingenious solution. Thanks! :smiley: