Hi everyone,

 

I have an image link which is roughly in the centre of my page:

 

 

Using CSS, I shift the background position on hover so that the purple band brightens slightly.

 

 

I was wondering how I would recreate this link using just a plain version of the image and creating the purple band/text with HTML/CSS. It's easy enough for me to create a div box, fill it with a purple background, and add the text. But how would I exactly align this purple div on top of the image? And is there CSS hover code which would lighten the purple band on hover?

 

 

Thanks for your help everyone.

 

If it helps, my current CSS code is:

.equalityresearchlink {
display: inline-block;
float: center;
width: 200px;
height: 525px;
text-decoration: none;
background: url("img/equality_research_link.png");
}

.equalityresearchlink:hover {
background-position: -200px 0;
}

Thanks

You will want to wrap your image and text inside a div with position relative. Then the text, wrap in a div with position absolute; Then you can position that second div with top:0px and left:0px; - something like:

<div class="image-container">
    <img src="my-image.jpg" />
    <div class="image-container--text">
        My Text
    </div>
</div>



.image-container { position: relative; }
.image-container--text { position: absolute; left: 0px; top: 300px; width: 200px; background-color:#ffffff; color:#000000; text-align:center; height: 60px; line-height: 60px; }

Edited February 13, 201511 yr by EpicWebs

Right, got you EpicWebs - many thanks for the reply, that's a great help.

lol There is no float center.

Thanks for letting me know cibgraphics.

oops closed my tab after writing message

 

briefly to add to what epicwebs did

http://codepen.io/dp/pen/vEdWPv?editors=110

Cheers davep, really appreciate your input. I see now it's quite simple. When I tried it before, I think I was using the position:absolute/relative incorrectly.

 

 

Many thanks.

I forked @@davep 's pen and adjusted it so the text is positioned directly in the center of the image (image can be any size) http://codepen.io/rbrtsmith/pen/MYQrWm

 

Also made the whole image a link, I think that generally makes for better ux to have larger click area.

Edited February 14, 201511 yr by rbrtsmith

@@rbrtsmith you're such a forker sometimes

 

nice use of display table but from a design point of view i would normally go with something like the golden ratio/two-thirds rule

after i did it i was thinking that whole image hover was better but it was going to take me longer to think how to do it...

 

btw i'm probably being dense but in your fork where's the closing pair of your anchor tag? or am i just missing something?

oops I forgot the closing </a>.

 

I do quite a bit of photography so I like the golden ratio, but that can prove a little tricky with responsive web, where we cannot determine what height the image will be at a given screen size. We can of course use JavaScript for this if really needed. Unfortunately table doesn't allow for vertical-align: two-thirds

 

Edit - that said, with some fiddling it could be possible to use the padding-bottom percentage trick to simulate the 2/3rds thing, but without testing I think we would still need to know the aspect ratio of the image. I'll have a play in a few hours and see if I can come up with something.

 

 

Edit, easier than I thought. Remove the tables, set the bottom property of the overlay to 33.333% and then the text element will need to be transformed to fit exactly over the center of this bottom position: transform: translateY(50%)

http://codepen.io/rbrtsmith/pen/dPdJpr

Edited February 14, 201511 yr by rbrtsmith