CODEWITHSUNDEEP
htmlcssrollover
Jon Kyte
Jon Kyte

Reputation: 2020

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

Upvotes: 0

Views: 749

Answers (2)

Talha Akbar
Talha Akbar

Reputation: 10040

You can also use sibling selector + to show the text because it is hidden.

Demo

.work-thumb img:hover + .roll-text {
    display:block;
}

Upvotes: 0

BenM
BenM

Reputation: 53246

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.

Upvotes: 3

Related Questions