Merhaba arkadaşlar bu yazımda sizlere kısaca CSS kodlarıyla, bir resmin üzerine gelince büyümesinin nasıl yapılacağından bahsedeceğim. Diyelim ki bir web sitesi yaptık yan yana resimlerin olduğu bir alan var. Burada hangi resmin üzerine geldiğimizi daha iyi görmemiz için bu resmi büyütmemiz görsellik açısından daha iyi olacaktır diye düşünüyorum. Bunu da paylaşacağım kodlar yardımıyla yapabilirsiniz.
Şimdi bir klasör açalım ve içine bir adet CSS dosyası, bir adet HTML dosyası ve bir adette resim atalım. Amacımız HTML dosyası içine CSS kodlarını çağırıp, ekleyeceğimiz resmin class’ına CSS’de tanımladığımız class ismini yazmak.
Html dosyasının içeriği aşağıdaki gibi olacaktır.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Büyüyen Resim Yapma</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img class="buyuyenresim" src="manzara.jpg" width="200" height="150" >
<img class="buyuyenresim" src="manzara.jpg" width="200" height="150" >
</body>
</html>Burada “<link rel=”stylesheet” type=”text/css” href=”style.css”>” koduyla CSS dosyamızı html içine çağırdık. Benim CSS dosyamın adı “style.css” olduğu için href kısmına adını yazdık. Body etiketleri içine manzara.jpg adında iki adet resim attık. Bir tane de ekleyebilirdik. Ama büyümeden oluşan farkın daha iyi görünmesi için iki tane ekledik.
Gelelim CSS dosyamızın içeriğine. style.css dosyamızı açıp içine aşağıda paylaştığım kodları yazalım;
.buyuyenresim {
margin-top:150px;
margin-left:50px;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
}
.buyuyenresim:hover {
cursor: pointer;
-webkit-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
box-shadow: 10px 10px 5px #888888;
z-index: 2;
position:relative;
}
İşlem bu kadar arkadaşlar. Html dosyamızı tarayıcıdan açıp, resmin üzerine gelip farkı görebilirsiniz. İyi kodlamalar.