Search code examples
htmlcsspositioningcss-positionrollover

CSS image thumbnail roll-over to display text

I'm trying to achieve this:

rollover

STEP logo is a thumbnail, and the RV logo next to it is the same, except it is being hovered on, at this point VIEW PROJECT and a blue see-through background appear.

I tried a few things:

Making the img a background of an <a> tag and placing a <p> tag in the <a> tag and using display: none; and then on :hover changing to display: block;

This layout is responsive so that caused problems, my code was something like this:

HTML:

<a class="work-thumb" href="#"><p class="work-thumb-rollover">view project</p></a>

CSS:

a.work-thumb {
    width: 20%;
    padding-top: 50%;
    background-image: url(images/work1.jpg);
    background-size: cover;
    -moz-background-size: cover;  /* Firefox 3.6 */
    background-position: center;
}
    /* This code works, the image as the background is responsive */

p.work-thumb-rollover {
    display: none;
}

p.work-thumb-rollover:hover {
    display: block;
    text-align: centre;
    width: 100%;
    background: rgba(54, 25, 25, .5);
}

    /* This doesn't seem to work, the width 100% doesn't take the width of it's parent and on rollover no color appears? */

I also tried using the img tag in HTML and Absolute Positioning:

HTML:

<a class="work-thumb" href="#"><img src="images/work1.jpg" alt="work"><p class="work-thumb-rollover">view project</p></a>

CSS:

.work-thumb {
    position: relative;
}

.work-thumb img {
    width: 33%;
    height: auto;
    float: left;
    padding: 0;
    margin: 0;
    border: 0;
    z-index: 1;
}

p.work-thumb-rollover {
    display: none;
}

p.work-thumb-rollover:hover {
    position: absolute;
    display: block;
    text-align: centre;
    width: 100%;
    background: rgba(54, 25, 25, .5);
    top: 50%;
    left: 50%;        
}

This one, the P tag width wouldn't take that of it's parent, and would stick to the top right of the box (no matter what top or left attributes i gave it).

I tried things similar to this, i've deleted them and gone back to square one (of just having the images in the html with no CSS apart from the responsiveness at the minute) but I tried variations on these and just could not get them to work.

Can any one shine any light on this, or provide an easy solution they may have already used or seen?

Solution

  • You can do this just with CSS/3 and HTML:

    Heres an example I made for you

    You'd have to replace the 

     background-color

    with

     background-image

    to get the result youre after.

    EDIT: Heres an updated JSFiddle Link >>