Need help with overlay text on clickable image

by 1 replies
2
Thank you in advance everyone for helping out.

I want to have a top stories section like these two websites:
Example one
Example two

Making the image clickable with <a href> is easy enough, but I searched like crazy to look for ways to have overlay text on the image like those two sites with no luck so far.

I want to have the text area opaque like the 'example two' site and as you can see the overlay text is also clickable. When you hover on the text the color changes as well.

Can anyone help me with the code to make that happen? Thank you for your time.
#website design #clickable #image #overlay #text
  • You're looking to do something like this:

    HTML Code:
    <style type="text/css">
	.pic-width {
		width: 400px;
	}
	.overlay {
		position: relative;
		bottom: 19px;
		color: #FFFFFF;
		background-color: #000000;
		opacity: 0.75;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
		filter: alpha(opacity=75);
	}
</style>
<div>
	<img class="pic-width" src="2.png"/>
	<div class="pic-width overlay">Test</div>
</div>
    The important thing here really is the "overlay" - notice that it has a position:relative inside of a containing div, and it has a bottom:19px set; that moves it up 19px from the bottom. Admittedly this is a little crude, but it's the general idea. It provides an overlay and you hopefully this will get you started on fiddling with it.
Join the discussion

Next Topics on Trending Feed