Resme Hover Efekti Vererek Döndürme

Merhaba sevgili WebNTK takipçileri. Bu yazımızda sizlere Resme Hover Efekti vermeyi göstereceğim. Bu efekt sayesinde fare ile resmin üzerine gelince resim 360 derece dönecek. Ve 2 saniyede eski haline gelecektir. Bu efekt ile sitenize hoş bir görünüm kazandırabilirsiniz.

Önizleme

CSS Kodları


<style> .img:hover { -webkit-transition: 2000ms; /* Chrome İle Uyumlu Zamanlayıcı */ -moz-transition: 2000ms; /* Mozilla İle Uyumlu Zamanlayıcı */ -o-transition: 2000ms; /* Opera İle Uyumlu Zamanlayıcı */ transition: 2000ms; /* Diğer Tarayıcılarla Uyumlu Zamanlayıcı */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=12);/* Diğer Tarayıcılarla Uyumlu Dönme Hareketi */ -webkit-transform: rotate(360deg); /* Chrome İle Uyumlu Dönme Hareketi */ -moz-transform: rotate(360deg); /* Mozila İle Uyumlu Dönme Hareketi */ -o-transform: rotate(360deg); /* Opera İle Uyumlu Dönme Hareketi */ } img { -webkit-transition: 2000ms; /* Chrome İle Uyumlu Zamanlayıcı */ -moz-transition: 2000ms; /* Mozilla İle Uyumlu Zamanlayıcı */ -o-transition: 2000ms; /* Opera İle Uyumlu Zamanlayıcı */ transition: 2000ms; /* Diğer Tarayıcılarla Uyumlu Zamanlayıcı */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=12);/* Diğer Tarayıcılarla Uyumlu Dönme Hareketi */ -webkit-transform: rotate(-360deg); /* Chrome İle Uyumlu Dönme Hareketi */ -moz-transform: rotate(-360deg); /* Mozila İle Uyumlu Dönme Hareketi */ -o-transform: rotate(-360deg); /* Opera İle Uyumlu Dönme Hareketi */ } </style>

Yukardaki kodu sitenize eklediğiniz zaman bütün resimlerin üzerine gelince yukardaki gibi efekt verir.

İyi Günler.