Resim Hover Efekti Nedir , Web Sitesinde Nasıl Kullanılır?

Web sitesi yapıyorsanız ve resimlerinizde dikkat çekici güzel efektler kullanmak istiyorsanız bu yazımız tam size göre. Yazımızda resim hover efekti nedir ve nasıl kullanılır hazır efektlerin bulunduğu site üzerinden açıklamaya çalışalım.

Resim Hover Efekti Nedir ?

Bir çok web sitesinde karşılaşacağınız resmin üzerine geldiğinizde büyümesi, sosyal medya ikonlarının çıkması ya da çerçevelerin çıkması gibi efektler dikkatinizi çekmiştir. İşte buna resim hover efekti denilmektedir. Bu efekti yapmak için bir çok yöntem bulunmaktadır. Genellikle bu efekt Css ile yapılmaktadır. Css konusunda yeterli düzeyde bilgiye sahipseniz kendiniz de yapabilirsiniz.

Fakat ben bu yazımda size en basit yol olan işinize yarayacak bir site olan https://miketricking.github.io/bootstrap-image-hover/ dan  hazır efekti sitenize nasıl ekleyip  çalıştıracağınızı örneklerle anlatmaya çalışacağım. Resim hover efekti nedir konusunu açıkladığımıza göre nasıl kullanılacağı konusunda bilgiler verelim.

Resim Hover Efekti Nasıl Kullanılır ?

Öncelikle bu özelliği  sitemizdeki resimlerde kullanabilmek için  bootstrap kütüphanesinin sitemizde tanımlı olması gerekiyor. Bootstrap kütüphanesini sitenize tanımlamayı bilmiyorsanız eğer bootstrap nedir? konulu yazımızı inceleyerek sitenize nasıl entegre edeceğiniz  hakkında bilgi alabilirsiniz.

Bu efekt için hazır örnekler ve kodlar bulunan https://miketricking.github.io/bootstrap-image-hover/

sitesine giriş yapıyoruz. Karşımıza çıkan sayfada  16 adet efekt ön izlemesi çıkacak. Bu 16 adet hover efektinden istediğimiz bir taneyi seçip sitemizde kullanabiliriz. Bunun için beğendiğiniz bir efektin üzerine basalım. Açılan pencereden css kodlarını alalım. Bu kodları kendi web siteniz için tanımladığınız css dosyasının içerisine genelde bu style.css olur içerisine ekleyelim. Html kodunu ise kendinize göre düzenleyip sitenizde kullanabilirsiniz. Daha ayrıntılı anlatabilmek için örnek üzerinden anlatmaya çalışalım.

Bootstrap kütüphanesi tanımlama işlemini yaptıktan sonra sitemiz için tanımladığınız style.css dosyanızın ( yada siz hangi isimle css dosyası tanımadıysanız ) içerisine aşağıdaki css kodlarını ekliyorsunuz. Tabi şunu da belirteyim buradaki kod hover bir efektinin kodlarıdır.

html bölümüne ise yine aşağıdaki örnek kodu kullanabileceğimiz gibi isterseniz kendinize göre düzenleyerek de kullanabilirsiniz.

<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12″>
<div class=”hovereffect”>
<img class=”img-responsive” src=”resim1.jpg” alt=””>  /* resim bu bölüme ekleniyor */
<div class=”overlay”>
<a class=”info” href=”link buraya”></a> /* bir link vermek için bu alan kullanılıyor */
</div>
</div>
</div>

bu şekilde bir düzenleme yapmanız gerekmekte. Sitede bulunan diğer efektlerden de istediğinizi bu şekilde çalıştırabilirsiniz. Umarım yazımız sizin için faydalı olmuştur.