Tilt afbeelding

Draai een afbeelding iets om er wat meer aandacht voor te krijgen.

Voor deze voorbeeld afbeelding is gebruik gemaakt van een afbeelding uit een website waar je test afbeeldingen kan ophalen, http://lorempixel.com

Bron: http://designshack.net/articles/css/joshuajohnson-2/

  • Plaats onder 'Meer' -  Geavanceerd de CSS code:

<style type="text/css" media="screen">
/*TILT*/
.tilt {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.tilt:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
</style>

  • Plaats de afbeelding met de HTML code, vervang de code met die voor de naam van je eigen afbeelding:

<div class="tilt pic">
<img src="http://lorempixel.com/300/300/transport/5" alt="car">
</div>


Voorbeeld, ga met de muis over de afbeelding
aan deze code is een zwarte rand toegevoegd met de code: style="border:5px solid black"

car