Merhaba, bu yazımda CSS Hover ile Nesneleri Büyütmek ve Küçültmek konusunda değineceğiz. Bir kaç farklı büyüme şekli ile bu yazıyı bitireceğiz. Yaptığım bir çok sitede işime yaradı. Bu yüzden hem elimin altında olması hem de ihtiyaç duyan arkadaşlar için bir kaynak olması için paylaşmak istedim.
CSS Hover ile Nesneleri Büyütmek ve Küçültmek
Sitelerimizi yaparken çoğu zaman bir kutunun yani div’in veya section’un üzerine geldiğimizde hafifçe büyümesini veya küçülmesini isteyebiliriz. Bu yazıda da bir kaç farklı şekilde büyüme ve küçülme efekti hazırlayacağız. Önce büyüme efektlerine bakalım.
CSS Hover ile Nesneleri Büyütmek
Yöntem 1
Öncelikle temel bir html sayfası hazırlayalım. Bu kodlar bize ekranın üst ortasında mavi bir daire verecektir.
<html>
<head>
<title> CSS Grow & Shrink </title>
<style>
div {
height:200px;
width:200px;
margin:auto;
margin-top:50px;
background-color:blue;
border-radius:200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Şimdi css leri yazalım ve üzerine gelindiğinde merkezden %10’luk büyüme verelim.
<html>
<head>
<title> CSS Grow & Shrink</title>
<style>
div {
height:200px;
width:200px;
margin:auto;
margin-top:50px;
background-color:blue;
border-radius:200px;
}
.grow {
transition: width .3s ease-in-out;
}
.grow:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="grow"></div>
</body>
</html>
grow css’i verdiğiniz div’in üzerine geldiğinizde biraz büyütecek. Buradaki linke tıklayarak nasıl çalıştığını görebilirsiniz. Açılan linkte kodları da görebilirsiniz.
NOT: Buradaki büyüme oranını
.grow:hover {
transform: scale(1.1);
}
Buradaki scale ile oynayarak değiştirebilirsiniz.
Geçişin Hız Eğrisini Belirtin
Özellik transition-timing-function, geçiş etkisinin hız eğrisini belirtir.
Geçiş zamanlama işlevi özelliği aşağıdaki değerlere sahip olabilir:
ease– yavaş bir başlangıç, sonra hızlı ve sonra yavaş sona eren bir geçiş efekti belirtir (bu varsayılandır)linear– baştan sona aynı hızda bir geçiş efekti belirtirease-in– yavaş başlangıçlı bir geçiş efekti belirtirease-out– yavaş sonlu bir geçiş efekti belirtirease-in-out– yavaş bir başlangıç ve bitiş ile bir geçiş efekti belirtircubic-bezier(n,n,n,n)– bir kübik-bezier işlevinde kendi değerlerinizi tanımlamanıza izin verir
NOT: Yukarıda maddelerde verilmiş değerleri, daha yukarıda verdiğim css kodları üzerinde deneyebilirsiniz. Yada ek olarak transition-timing-function, satırı ile belirtebilirsiniz.
Yöntem 2
Bu yöntemde büyüme yükseklik ve genişlik için ayrı ayrı tanımlanabilir. Büyüme yönü merkezden değil sağa ve aşağı doğru olmaktadır.
NOT: İlk yönteme göre farklılıklar var. Örneğin ilk örnekte daire div’e css’leri id ile vermiştik ama bu yöntemde id ile verildiğinde çalışmıyor. O yüzden div css leri class ile verildi.
İşte kodlar.
<html>
<head>
<title> CSS Grow </title>
<style>
#textDiv{
width:600px;
height:800px;
float:left;
}
#textDiv textarea{
width:600px;
height:800px;
}
.mydiv {
height:200px;
width:200px;
margin:auto;
margin-top:50px;
background-color:blue;
border-radius:200px;
}
.grow {
transition: width 2s, height 4s;
}
.grow:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="textDiv">
<textarea>
<!--
<html>
<head>
<title> CSS Grow & Shrink</title>
<style>
#textDiv{
width:600px;
height:800px;
float:left;
}
#textDiv textarea{
width:600px;
height:800px;
}
.mydiv {
height:200px;
width:200px;
margin:auto;
margin-top:50px;
background-color:blue;
border-radius:200px;
}
.grow {
transition: width 2s, height 4s;
}
.grow:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="textDiv"> </div>
<div class="mydiv grow"></div>
</body>
</html>
-->
</textarea>
</div>
<div class="mydiv grow"></div>
</body>
</html>
Burada css ‘lerimizi biraz açalım.
.grow {
transition: width 2s, height 4s;
}
.grow:hover {
width: 300px;
height: 300px;
}
transition kısmında width yani genişlikte büyüme animasyon süresi 2 saniye de tamamlanırken, yükseklikte büyüme animasyon süresi 4 saniyede tamamlanacaktır. Ne kadar büyüyecekleri de hover kısmında verilen boyutlarda olacaktır.
Yani dairemizin genişliği 2 saniye de 300 piksele ulaşırken, yüksekliği 4 saniyede 300 piksele ulaşacak. Animasyon toplam 4 saniye sürer. Yani animasyonlar aynı anda başlar.
Bu yöntemin canlı animasyonuna bu linkten ulaşabilirsiniz.
Yöntem 3
Bu yöntemde büyüme efektini biraz dalgalı şekilde nasıl yapabileceğimizi göreceğiz. Div’in üzerine geldiğimizde biraz büyüsün kısa bir süre sonra biraz daha büyüsün şeklinde olacak.
Kodları görelim.
<html>
<head>
<title> CSS Grow & Shrink</title>
<style>
#textDiv {
width: 600px;
height: 800px;
float: left;
}
#textDiv textarea {
width: 600px;
height: 800px;
}
.mydiv {
height: 200px;
width: 200px;
margin: auto;
margin-top: 50px;
background-color: blue;
border-radius: 200px;
}
.grow {
transition: all .4s cubic-bezier(.23, .73, .73, .21);
}
.grow:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<div id="textDiv">
<textarea>
<!--
<html>
<head>
<title> CSS Grow & Shrink</title>
<style>
#textDiv{
width:600px;
height:800px;
float:left;
}
#textDiv textarea{
width:600px;
height:800px;
}
.mydiv {
height:200px;
width:200px;
margin:auto;
margin-top:50px;
background-color:blue;
border-radius:200px;
}
.grow {
transition: all .4s cubic-bezier(.23,.73,.73,.21);
}
.grow:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<div id="textDiv"> </div>
<div class="mydiv grow"></div>
</body>
</html>
-->
</textarea>
</div>
<div class="mydiv grow"></div>
</body>
</html>
Bu kodlarla div 1,5 kat büyüyecek ama dalgalanarak büyüyecek. Bu linke tıklayarak nasıl çalıştığını canlı olarak görebilirsiniz.
Burada bu dalgalanmayı veren şudur.
.grow {
transition: all .4s cubic-bezier(.23, .73, .73, .21);
}
Buradaki css cubic-bezier sayesinde istediğimiz gibi dalgalanma verebiliyoruz. Verilen değerlerden de anlayabileceğiniz gibi değer aralıkları 0 ile 1 arasındadır. Tabi burada kardeşiniz işinizi kolaylaştırmak için size bir site önerecek. Bu sitede cubic-bezier değerleri üretebiliyorsunuz. Bu linkten o siteye ulaşabilirsiniz.
CSS Hover ile Nesneleri Küçültmek
Şimdiii gelelim küçültmeye. Ben basiti. Yukarıdaki kodlara bakın. Hover kısmında ya genişlik verdik ya transform verdik.
Transform kullanılıyorsa, değeri 0.9, 0.8 gibi 1’in altında bir değer verirseniz küçülür.
Height Width kullanılıyorsa, değerleri div’e verdiğiniz Height Width değerlerinden daha küçük bir değer vermelisiniz.
Hepsi bu kadar….
CSS Hover ile Nesneleri Büyütmek ve Küçültmek yazımda bu kadardı arkadaşlar. Umarım faydalı bir bir yazı olmuştur.
Tüm kodları içeren html dosyasına buradan ulaşabilirsiniz.
Diğer yazılarımızda görüşmek üzere… Discord’a katılmayı unutmayın. Tüm CSS yazılarım için tıklayabilirsiniz.
Kodla kalın. :)
Beğendim!
Harika!
İlginç!
Beğenmedim
