Text-Image overlay

  • ans167

    (@ans167)


    13 years ago

    Hope somebody can help with this. I’m stumped!

    I have my page titles overlaid on image thumbnails. I want this text to be hidden and only show when you mouseover the image.

    I have managed to get a coloured span over the images but can’t work out how to hide/show the text. I was trying to use z-index or position:bottom/top but that doesn’t seem to work. Also when I mouse over the text the coloured span doesn’t show…how can I fix this?

    https://www.asindexed.com

    .post_all {margin-left: auto; margin-right: auto; width: 975px; display: block;}
.post_home {width: 311px; float: left; margin: 0 0 30px 10px; text-decoration: none; position: relative;}
.thumb {display: block; width: 311px; height: 460px; margin-bottom: 5px; position: relative; color: #333;}
.thumb img {display: block;}
.thumb span {display: block; width: 311px; height: 460px; position: absolute; top: 0; left: 0; background: #fcf2ad;}
.post_home h2 {font-size: 144px; position: absolute; top: 30%; text-align: center; width: 100%;}
.post_home h2 a {color: #000; text-decoration: none;}

    Any help much appreciated!

  • The topic ‘Text-Image overlay’ is closed to new replies.