Text or image which appears on hover is a nice CSS effect, which can be used in many situations on websites or web applications. Let’s say we have a news feed with title and image, when user put mouse cursor over that that the article lead appears. I will show you in this short tutorial how to build this solution, which I named “Hover box”.
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.
Table of Contents
CSS image or text on hover – explanation
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.
Examples of CSS image and text on hover
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 further examples in this article.
<div class="hvrbox"> <img src="img/photos/photo1.jpg" alt="Mountains" class="hvrbox-layer_bottom"> <div class="hvrbox-layer_top"> <div class="hvrbox-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.</div> </div> </div>
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}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 (or news feed) on your website, you should add URL to background-image as inline CSS code, just like below:
<div class="hvrbox hvrbox_background" style="background-image: url(img/photos/photo1.jpg);"> <div class="hvrbox-layer_top"> <div class="hvrbox-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.</div> </div> </div>
.hvrbox_background {
width: 400px;
height: 250px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}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:
<div class="hvrbox"> <img src="img/photos/photo3.JPG" alt="Mountains" class="hvrbox-layer_bottom"> <img src="img/photos/ufo.png" alt="" class="hvrbox-layer_top hvrbox-layer_image"> </div>
.hvrbox .hvrbox-layer_image {
padding: 0px;
background: transparent none repeat scroll 0% 0%;
}Effects
In previous examples you learned how to code (in general) text or image to appear over another content. Now I will show in following examples how to add a nice effects on how additional layer (over the normal, visible, content) appears on hover. This can become visible with fading, can be moved (translated), can rotate, become bigger etc. There are many options how to show new text or image (or in general – new layer) over the visible content on hover event. Let’s check the following examples.
Top layer sliding from bottom to top on hover
<div class="hvrbox"> <img src="img/photos/photo1.jpg" alt="Mountains" class="hvrbox-layer_bottom"> <div class="hvrbox-layer_top hvrbox-layer_slideup"> <div class="hvrbox-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.</div> </div> </div>
.hvrbox .hvrbox-layer_slideup {
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.hvrbox:hover .hvrbox-layer_slideup,
.hvrbox.active .hvrbox-layer_slideup {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}Top layer sliding from top to bottom on hover
<div class="hvrbox"> <img src="img/photos/photo1.jpg" alt="Mountains" class="hvrbox-layer_bottom"> <div class="hvrbox-layer_top hvrbox-layer_slidedown"> <div class="hvrbox-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.</div> </div> </div>
.hvrbox .hvrbox-layer_slidedown {
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.hvrbox:hover .hvrbox-layer_slidedown,
.hvrbox.active .hvrbox-layer_slidedown {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}Top layer sliding from right to left on hover
<div class="hvrbox"> <img src="img/photos/photo1.jpg" alt="Mountains" class="hvrbox-layer_bottom"> <div class="hvrbox-layer_top hvrbox-layer_slideleft"> <div class="hvrbox-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.</div> </div> </div>
.hvrbox .hvrbox-layer_slideleft {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
.hvrbox:hover .hvrbox-layer_slideleft,
.hvrbox.active .hvrbox-layer_slideleft {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}Top layer sliding from left to right on hover
<div class="hvrbox"> <img src="img/photos/photo1.jpg" alt="Mountains" class="hvrbox-layer_bottom"> <div class="hvrbox-layer_top hvrbox-layer_slideright"> <div class="hvrbox-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.</div> </div> </div>
.hvrbox .hvrbox-layer_slideright {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.hvrbox:hover .hvrbox-layer_slideright,
.hvrbox.active .hvrbox-layer_slideright {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}Top layer scaling on hover
<div class="hvrbox"> <img src="img/photos/photo1.jpg" alt="Mountains" class="hvrbox-layer_bottom"> <div class="hvrbox-layer_top hvrbox-layer_scale"> <div class="hvrbox-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.</div> </div> </div>
.hvrbox .hvrbox-layer_scale {
border-radius: 50%;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.hvrbox:hover .hvrbox-layer_scale,
.hvrbox.active .hvrbox-layer_scale {
border-radius: 0%;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}Top layer rotating on hover
<div class="hvrbox"> <img src="img/photos/photo1.jpg" alt="Mountains" class="hvrbox-layer_bottom"> <div class="hvrbox-layer_top hvrbox-layer_rotate"> <div class="hvrbox-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.</div> </div> </div>
.hvrbox .hvrbox-layer_rotate {
border-radius: 50%;
-moz-transform: rotateZ(0);
-webkit-transform: rotateZ(0);
-ms-transform: rotateZ(0);
transform: rotateZ(0);
}
.hvrbox:hover .hvrbox-layer_rotate,
.hvrbox.active .hvrbox-layer_rotate {
border-radius: 0%;
-moz-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}Top layer scaling and rotating on hover
<div class="hvrbox"> <img src="img/photos/photo1.jpg" alt="Mountains" class="hvrbox-layer_bottom"> <div class="hvrbox-layer_top hvrbox-layer_scale-rotate"> <div class="hvrbox-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.</div> </div> </div>
.hvrbox .hvrbox-layer_scale-rotate {
border-radius: 50%;
-moz-transform: scale(0) rotateZ(0);
-webkit-transform: scale(0) rotateZ(0);
-ms-transform: scale(0) rotateZ(0);
transform: scale(0) rotateZ(0);
}
.hvrbox:hover .hvrbox-layer_scale-rotate,
.hvrbox.active .hvrbox-layer_scale-rotate {
border-radius: 0%;
-moz-transform: scale(1) rotateZ(360deg);
-webkit-transform: scale(1) rotateZ(360deg);
-ms-transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
}Mixed effect on hover
You can mix settings from examples with effects above and get combinations just like below:
<div class="hvrbox"> <img src="img/photos/photo1.jpg" alt="Mountains" class="hvrbox-layer_bottom"> <img src="img/photos/ufo.png" alt="" class="hvrbox-layer_top hvrbox-layer_image hvrbox-layer_scale-rotate"> </div>
Mobile support for appearing text or image on hover event
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.
<a href="http://css-workshop.com" target="blank"> <div class="hvrbox"> <img src="img/photos/photo1.jpg" alt="Mountains" class="hvrbox-layer_bottom"> <div class="hvrbox-layer_top"> <div class="hvrbox-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non. <div class="hvrbox-text_mobile">Tap again to go further</div></div> </div> </div> </a>
or: watch live demo | see on GitHub.
