HTML/CSS Image zoom effect


Webdesign | 4-04-2014 | Pascal Merks | Reacties


Een leuk CSS3 effect om te gebruiken op afbeeldingen die je een stuk wil laten zoomen. Stel je hebt en klein fototje bij een nieuws artikel die wat details heeft die je net neit kan zien dan kan je via deze weg op een makkelijke manier de foto wat inzoomen.

Demo link: http://pmkmedia.nl/uploads/demos/zoom-foto.html

 

Wat moet je doen:

Heel simpel. geef de afbeelding in de div waar hij inzit de volgende CSS mee:

Code:

.foto img {
width: 300px;
height: auto;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.foto img:hover {
overflow: hidden;
-ms-transform: scale(1.5);
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
}

 

Zo als je nu kan zien in de css is een foto in de div met class "foto" 300px. Als je er overheen hovert schaalt hij naar 150% en als je met de muis er van af gaat schaalt hij weer terug naar 100% (300px in dit geval).

Een klein leuk effectje die soms nuttig kan zijn!

 

Reacties:

comments powered by Disqus

Laatst toegevoegd

Categorieën

Laatste reacties

Laatste tweets