Burger mobile menu

Hover box – text over images on hover and more…

Piotr Elmanowski Piotr Elmanowski | 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.

DOWNLOAD COMPONENT

or: watch live demo | see on GitHub.

Examples

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:


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


Mixed

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.

DOWNLOAD COMPONENT

or: watch live demo | see on GitHub.

Tags: , , , , ,


Scroll top
Loading
Zdjęcie w lewo Zdjęcie w prawo