Making the image clickable is easy enough with <a href>, but I can’t seem to find a way to have text over image like those sites. As you can see the texts are also clickable and the color changes when you hover on them. I like the opaque text area of the ‘example 2’ site better but I haven’t been able to find a way to code that.
Can anyone help me with the code to have opaque overlay text area on top of an image that is also clickable? Thank you.
Here’s a way to achieve the effect of Example 2 but with much simpler markup. Just a single anchor containing an image and a span. Should work back to IE6. It’s arguably an improvement on Example 2 as the text and background both change when the entire area of the image is hovered.
For browsers that don’t support RGBA backgrounds, two transparent pngs are applied to the span: one for the initial state and one for when the anchor is hovered (you’ll need to source these yourself). Just use one if you don’t want the background to change on hover.
a.pic-link {
display:block; /* allow height and width to be specified - not needed if floated */
height:300px; /* match img */
width:600px; /* match img */
position:relative; /* so children of .pic-link can be positioned absolutely in relation it */
color:blue;
}
a.pic-link:hover {
color:green; /* IE6 requires a change of some kind to occur on a:hover for hover to work on a.pic-link:hover span, otherwise this could be applied to that selector */
}
a.pic-link img {
border:none;
vertical-align:bottom; /* removes the space reserved for text descenders */
}
a.pic-link span {
position:absolute;
bottom:0;
left:0;
width:96%;
padding:0.5em 2%; /* 2% left + 2% right + 96% width = 100% */
background:url(background.png); /* for browsers not supporting rgba */
background:rgba(100, 100, 100, 0.5);
}
a.pic-link:hover span {
background:url(background_hover.png); /* for browsers not supporting rgba */
background:rgba(100, 100, 100, 0.4);
}
<img src="image.jpg" height="300" width="600" alt="" />
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
Thank you both for your help, but Victorinox I’m going with your suggestion. It is perfect for my site, so thank you again.
Ok, so I’ve come across a problem. I added the CSS code and tested the overlay text on a page (have not yet tested on the widget area below the header) and something unexpected has happened. Check out the page in question below, My site
As you can see the text area extends beyond the image and also the entire post area is clickable. I’m sorry to bother you some more, but can you tell me what I’m doing wrong? Thank you so much.
Firstly, you have two instances of the .pic-link anchor. The first encloses an img and the second the span. There should only be one .pic-link anchor enclosing both the img and span.
Secondly, the image size is narrower than the width of the anchor declared in the CSS, so the span/overlay is wider than the image.
If you plan to use images of various dimensions then a different technique would be needed, to ensure the overlay matches the width of the images.
The following CSS will fit to size, though not on IE6 which will spill out. Maybe someone else has a fix for that.
If supporting IE6, you’ll also need a fix for PNG transparency, which you can find elsewhere.
a.pic-link {
position:relative;
color:#ff6;
text-decoration:none;
display:inline-block;
}
a.pic-link:hover {
color:#68D6FF;
text-decoration:underline;
}
a.pic-link img {
border:none;
vertical-align:bottom;
}
a.pic-link span {
position:absolute;
bottom:0;
left:0;
padding:0.5em 1em;
background:url(background.png);
background:rgba(0, 0, 0, 0.6);
}
a.pic-link:hover span {
background:url(background_hover.png);
background:rgba(0, 0, 0, 0.7);
}
/* IE7 Hacks */
*+html a.pic-link span { /* for IE7 */
width:96%;
padding:2.1%; /* a little extra in case the width is calculated too short */
}
*+html a.pic-link {
overflow:hidden; /* clips off any extra width */
}
Thank you so much for all your help Victorinox. Can you please look at the test page one more time? Test page
The problem is partly fixed, but as you can see the overlay is slightly narrower than the image and it overflows to the bottom a little more than half way out. Thank you again, I really appreciate this.
I’m looking into the PNG transparency fix for the IE6, I’ll get that done after I get this issue straightened out first.
You have <br> elements in the anchor. Remove all these (and if using them in an XHTML document they should be self closed i.e. <br/> ).
My previous CSS wasn’t well tested. Replace with:
a.pic-link {
position:relative;
color:#ff6;
text-decoration:none;
display:inline-block;
overflow:hidden;
}
a.pic-link:hover {
color:#68D6FF;
text-decoration:underline;
}
a.pic-link img {
border:none;
vertical-align:bottom;
}
a.pic-link span {
position:absolute;width:96%;
bottom:0;
left:0;
padding:0.5em 2.1%; /* a little extra in case the width is calculated too short */
background:url(background.png);
background:rgba(0, 0, 0, 0.6);
}
a.pic-link:hover span {
background:url(background_hover.png);
background:rgba(0, 0, 0, 0.7);
}
In IE6 the span width is not contained by the boundary of the anchor and any text spilling is cut off by the anchor’s overflow:hidden; - a quick and dirty fix for this, as you are already using jQuery on the page, would be to target IE6 with a script that gets the width of the image and applies it to the span. Put this immediately before your closing </body> tag.
Also, your img element has empty width, height and alt values. Stating the img dimensions helps page rendering and the alt tag is both required for XHTML and for accessibility reasons.
The img tags should be self closed i.e. ending /> rather than > . It would be worthwhile spending some time fixing other HTML and CSS validation errors, of which there are a good number.
Hi Black Max, thanks for the PNG transparency fix. That seems like a ridiculously easy way to fix the problem. I really appreciate it.
Vitorinox, your fix has worked flawlessly. Thank you so much. I asked around for this everywhere and no one on any other forums had any idea on how to achieve this.
I’ll fix the img element issues and also the self closing img tags tonight. I very much appreciate you taking the time to let me know of the errors.
I know it must have taken you some time to figure all this out for me and I don’t know how to thank you properly. I’m not a man of much talent, but if you need anything just let me know and I’ll do my best to help you out as well.
