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](https://i.stack.imgur.com/cLA6i.png)

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](http://jsfiddle.net/7Db9n/11/)

```
<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