Search code examples
htmlcssrollover

HTML / CSS Image thumbnail roll over

I asked a question on here yesterday for this solution, and thought I had solved it and marked an answer as correct but now I realise it wasn't quite right.

I've been playing around with a fiddle, essentially I want this..

Rollover

On the left would be the NON hovered state, then ON HOVER I would like the blue overlay and the text 'View Project'.

Here is the fiddle I am playing with, the only thing I cannot get to show is the text.

jsFiddle

<div class="cont">

<div class="work-thumb"><img src="http://www.menshealth.co.uk/cm/menshealthuk/images/qQ/mh-face-off-winner-MED-07032011.jpg" /><a class="roll-text">View</a></div>

A few things to note... the <img> MUST be responsive. so the 'view project' must also be responsive ( cannot use fixed pixel widths for it ).

Any help would be massively appreciated. Thanks

Solution

  • You need to activate the text when hovering on the div element, not the anchor itself:

    .work-thumb:hover a.roll-text {
    display: inline-block;
    position: absolute;
    top: 20px;
    left: 10px;
    text-align: center;
    color: #fff;
}

    Please see the updated jsFiddle.