CSS3

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

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>

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu