CSS-WORKSHOP.COM

Text over images on hover and more

Download component or Go back to article

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

In this case the box's width and height depend on provided image size.

<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>
Mountains
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.

Image as a background and a layer with text on hover on it

In this case the box's width and height are defined in CSS and image is a background of the box.

<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>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.

Image as img tag and second image as layer on hover over it

In this case there is no layer with text, because another image is displayed on hover.

<div class="hvrbox">
	<img src="img/photos/photo3.JPG" alt="Mountains" class="hvrbox-layer_bottom">
	<img src="img/photos/ufo.png" alt="Mountains" class="hvrbox-layer_top hvrbox-layer_image">
</div>
Mountains Mountains

Effects

Sliding from bottom to top

<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>
Mountains
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.

Sliding from top to bottom

<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>
Mountains
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.

Sliding from left to right

<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>
Mountains
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.

Sliding from right to left

<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>
Mountains
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.

Scale from 0% to 100% with border-radius change.

<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>
Mountains
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.

Rotate from 0 deg to 360 deg (one full rotation) with opacity and border-radius change.

<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>
Mountains
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.

Mixed two above examples - scaling and rotating.

<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>
Mountains
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.

Mobile support

When user clicks here first – the top layer will show with text “Tap again to go further”, and on the second click – “hover box” will become linkable. You should test it by using mobile device.

<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>
		</div>
	</div>
</a>
Mountains
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.
Tap again to go further