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>
