CSS3

Css ile üzerine gelince büyütme (2020 Güncel)

CSS3 İle Büyüyen Zoom Efekti

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>

İlgili Makaleler

Bir Yorum

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu