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 resmi yakınlaştırma, resme zoom verme, CSS zoom efekti nasıl yapılır gibi sorularınızın cevabını bulacaksınız.
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>
Çok teşekkürler