HTML CSS hover efekt
- Konuyu başlatan alakc327
- Başlangıç tarihi
Bunun bir sürü yolu var kardeşim. Mesela ilk basit yolu şu olabilir
a::after
{
content:'EVLİLİK';
font-size:20px;
line-height: falan filan bu şekilde yazıyı tam ortaladığın zaman opacity değerini 0 yaparsın
böylece yazı görünmez. hoverda ise opacity:1 yaparsan yazı görünmeye başlar.
}
Başka bir yöntem ise ve en sağlam yöntem diyebilirim; JQuery kullanman. jquery ile istediğini yaptırtabilirsin. Ama onu da yapamam dersen o zaman
a etiketinin içine bir div ekle bu dive bir class ver. Position:absolute olsun ve tüm resmi kaplasın. Sonra içine EVLİLİK yaz. background-color : transparant yap ki arkaplanı olmasın sadece yazı görünsün. Sonra buna opacity 0 verirsin ve hover ına da opacity 1 verirsin.
a::after
{
content:'EVLİLİK';
font-size:20px;
line-height: falan filan bu şekilde yazıyı tam ortaladığın zaman opacity değerini 0 yaparsın
böylece yazı görünmez. hoverda ise opacity:1 yaparsan yazı görünmeye başlar.
}
Başka bir yöntem ise ve en sağlam yöntem diyebilirim; JQuery kullanman. jquery ile istediğini yaptırtabilirsin. Ama onu da yapamam dersen o zaman
a etiketinin içine bir div ekle bu dive bir class ver. Position:absolute olsun ve tüm resmi kaplasın. Sonra içine EVLİLİK yaz. background-color : transparant yap ki arkaplanı olmasın sadece yazı görünsün. Sonra buna opacity 0 verirsin ve hover ına da opacity 1 verirsin.
Var kardeşim işte ama sadece css ile yapamazsın onu biraz da javascript lazım. Yani daha basit yolu JQuery kullanmalısın. Jqueryde (javascriptte) mouseenter olayı var mesela. A nın üzerine fare gelince append ile istediğin şeyi ekletir mouseleave olunca da remove ile tekrar silebilirsin.
Sadece css ile yapılabilir mi dersen büyük ihtimalle yapılır ama bu biraz daha üst seviye css bilgisi ister. Css3 ile gelen animate olayları var. Onunla da yapılabilir belki ama o da gereksiz yere siteyi ağırlaştırmak olur sadece.
Yani sana önerim jquery öğren ya da dediğim gibi a nın içine görünmez bir div ekle hover olayında bunu göster.
