CODEWITHSUNDEEP
htmlcsshover
Apple Man
Apple Man

Reputation: 13

On image hover - add a caption which takes the width of the image

Okay. So what I'm trying to do is make it so that when I hover over an image, the image changes from black and white/greyscale to color as well as show text in the bottom, which is a hyperlink. I have this so far.

Since I couldn't figure out how to use the stackoverflow code thing, I will link to my web page. enter link description here

Thanks. :)

Upvotes: 0

Views: 52

Answers (1)

Danield
Danield

Reputation: 125611

Set your anchor initially with display: none and then on hover set it to display: block.

FIDDLE

NB: In order to get the width of the anchor to suit the img width - without manually fixing a width on the container div - I have used one of the techniques that I described in this post.

Markup

<div>
    <img src="http://lorempixel.com/400/200" alt="" />
    <a href="#">Some link</a>
</div>

CSS

div {
    display:table;
    width: 1px;
}
img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
    box-sizing: border-box;
}
div:hover img {
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    filter: none;
}
a {
    display: none;
    position: relative;
    top: -45px;
    height: 40px;
    text-decoration: none;
    padding: 8px 0 0 12px;
    box-sizing: border-box;
}
div:hover a {
    display: block;
    background: rgba(0,0,0,.8);
    color: #fff;
    text-transform: uppercase;
}

Upvotes: 1

Related Questions