CSS Resim- Fotoğraf Büyütme
CSS3 ile her zaman kullanabileceğiniz sayfanıza görsel şölen katan transform tanımı beraberinde scale desteğiyle bu işlemi gerçekleştirebilirsiniz.
Moz, ms ve webkit parametrelerini’de kullanarak yapacağımız bu örnek görselleri büyütürken aynı zamanda bir geçiş efekti de sağlıyor.
CSS ile Üzerine Gelince Büyütmek için aşağıdaki kodları kullanabilirsiniz.
Canlı Demo
Kaynak Kodları
Aşağıdaki kaynak kodlar “html + css ” ile birlikte verilmiştir. Tümünü kopyalayıp “.html” şeklinde kayıt ettiğinizde hemen çalıştırabilirsiniz.
<html>
<head>
<title>furkandemirci.com </title>
<style>
.buyutec
{
position: relative;
-webkit-transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-ms-transition: all .2s ease-in;
}
.buyutec:hover
{
z-index:4;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);
}
</style>
</head>
<body>
<div style="padding:70px;">
<img class="buyutec" src="https://hizliresim.com/images/logo-linux.png">
<img class="buyutec" src="https://hizliresim.com/images/logo-windows.png">
<img class="buyutec" src="https://hizliresim.com/images/logo-chrome.png">
</div>
<br><br>
Daha İyileri <a href="http://furkandemirci.com">Burada</a>
</body>
</html>
Daha Fazlasını Görüntüleyin!
Çocuklar ile pişirmek – onları nasıl dahil edersiniz
Çin hisse senedi piyasası ABD gayrimenkulünü artırabilir
Her şey söyledikten ve yapıldıktan sonra, yapılandan daha fazlası söylenir
YNAP güçlü 2015 büyümesi sonrası daha yavaş satış büyümesi bekliyor
Wordpress Öne Çıkan Görsel Hatası Çözümü
Bitkisel çaylar için tam kapsamlı rehber
