Efekt Podniesienia Obrazka - CSS

Ten prosty efekt CSS demonstruje użycie właściwości rotate () i box-shadow CSS3, aby utworzyć DIV-a, który nieznacznie podnosi się z określonego obszaru, w tym przypadku, z góry, gdy najedziemy myszą na obrazek unosi się on nad element DIV.

Efekt TUTAJ

Kod do pliku 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>

Kod do pliku 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>

 Autor kodu Dynamic Drive

Projekt © 2009 - INFOPROG 70391 odwiedzin