Dynamic Drive CSS Library- CSS Lift up effect

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

CSS Library: Image CSS: Here

CSS Lift up effect

Author: Dynamic Drive

This simple CSS effect demonstrates using CSS3's rotate() and box-shadow properties to create a DIV that lifts up slightly from a specific area, in this case, the top, when the mouse rolls over the DIV.

Demo:

The CSS:

<style>
div.liftup{
    padding: 5px;
    position: relative;
	width: 200px;
	height: 150px;
	overflow: hidden;
    border: 1px solid black;
    background: black;
    color: white;
    box-shadow: 0 0 0 gray;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

div.liftup:hover{
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -moz-transform: rotateX(20deg);
    -webkit-transform: rotateX(20deg);
    transform: rotateX(20deg);
    -moz-transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    box-shadow: 0 20px 20px -5px gray;
}

div.liftup img{
		width: 200px;
		height: 150px;
}

</style>

The HTML:

<div class="liftup"><img src="http://www.dynamicdrive.com/cssexamples/media/coconut.jpg" ></div> 
<div class="liftup"><img src="http://www.dynamicdrive.com/cssexamples/media/ocean.jpg" ></div> 
<div class="liftup"><img src="http://www.dynamicdrive.com/cssexamples/media/horses.jpg" ></div> 
<div class="liftup"><img src="http://www.dynamicdrive.com/cssexamples/media/angelinasmall.jpg" ></div>

Code Info

Rate this code:

Date Posted: 12/10/2015

Revision History: None

Usage Terms: Click here