application-octet-stream

Posted by & filed under Code.

Tested possibilities of the markup that is possible in Twitter Bootstrap 

I just tried using the same size images and some extra markup to create a . I had used a similar effect in another context.
I searched around on the web but could not find a good solution so I decided to adapt the original code I had.

The biggest issue was the depth of the hovered content: in the original the markup had a fixed depth but as the  thumbnails need to be flexible I could not find a method that worked until I came across a very ugly hack, which seem to work.

After further checking and testing I discoverd that I could use the “height:100%” property of the masked area. This also works on Linux/Chrome now.

The result can be seen on each page that is an archive page.

One thing that I changed later on is the link, first the whole area(title and text)  was a link but I changed it after I  tested in on a tablet, as the mouse over does not work the same as on a computer.