Burger mobile menu

Hover box – text over images on hover and more…

Published: 14 Nov, 2015

Hover box is a component with additional hidden text layer, which becomes visible on hover and covers original box with image – in few combinations. Feel free to download it in package or as a single css file and use it in your project. Or just read the instructions how to make it by yourself.

Width and height of boxes are not defined in my CSS or HTML code, they fit provided image size. If the image is too large, you need to define width by parent element e.g. Twitter Bootstrap column, like “col-sm-3” (then height adjusts automatically to width). The only exception is in second example with image as a background on bottom layer – here you must write a rule in CSS to define width and height of the box.


or: watch live demo | see on GitHub.


Image as a img tag and a layer with text on hover over it – base settings

In this case the box width and height depend on provided image size. You only need to put an url to image and text on top layer. In the example below, html and css code are also a base for all examples in this article.

Image as a background and a layer with text on hover

Here the box width and height are defined in CSS and image is a background of the box. If you want to use it, for example to list posts on website, you should add url to background-image as inline CSS code, just like below:

Image as img tag and second image as layer on hover

In this example text layer is replaced by another image which is displayed on hover. It can be used to achieve interesting effects:


Top layer sliding from bottom to top

Top layer sliding from top to bottom

Top layer sliding from right to left

Top layer sliding from left to right

Top layer scaling

Top layer rotating

Top layer scaling and rotating


You can mix settings from examples with effects above and get combinations just like below:

Mobile support

Sometimes you will need to wrap “hover box” with a hyperlink, like in example below, and if text displayed on hover will be important to the user it won’t show on hover event on mobile device. Such issue can be solved with JavaScript.

Here on first click – the top layer will appear with text “Tap again to go further”, and on the second click – “hover box” will become linkable. You should test it on a mobile device. You can enable mobile support by including provided in demo file “hover-box.js”. CSS code is compatible with that on base version. Remember that it requires jQuery library. You can test it on mobile device or on desktop with browser window width lower than 1024px.


or: watch live demo | see on GitHub.

Tags: , , , , ,

Scroll top
Check more tips and apps for developers here. mydevil
Zdjęcie w lewo Zdjęcie w prawo