CSS ile Resimlere Zoom Vermek
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS ile Resimlere Zoom Vermek

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2522)
RAPOR ET
Bu dersimizde eklenti kullanmadan resimlere zoom vermeyi anlatacam.Mantığı şu bir alanımız var buna background veriyoruz ve backgroundun başlama noktasını orta nokta diyoruz.Hover efektinde bakgroundun boyutunu büyültüyoruz.Böylelikle 4 tarafa eşit büyüyo ve elimizde büyülme oranında zoomlanmış bir resim oluyo :).

Kodlar :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>cArleone</title>
<style type="text/css">
.zoom{width:330px;height:210px;background-image:url(metro-slider-3.png);background-position:center;background-repeat:no-repeat;background-size:330px 210px;transition:background-size 1s;-webkit-transition:background-size 1s;-moz-transition:background-size 1s;-o-transition:background-size 1s; }
.zoom:hover{background-size:530px 310px;}
</style>
</head>
<body>

<div class="zoom"></div>

</body>
</html>


Yukardakinin normal görüntüsü :
http://ustaderslik.com/resim/ders/rwmbb.png
Mouse üzerindeyken görüntüsü :
http://ustaderslik.com/resim/ders/rwmcf.png

Yukarda backgroundtu verip hoverla büyültük.Daha estetik olması için transitionla 1 saniyede büyülttüm.Böylelikle fake bir zoom yapmış olduk.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol