Resmin Üzerine Gelince Buton Çıkması (Image Overlay)

Bu yazımda Html ve Css kullanarak image overlay yani resmin üzerine gelince resmi kaplayacak şekilde Html öğelerinin gösterilmesini yapacağız.

Burada Html öğeleri derken istediğimiz etiketleri kullanabiliriz. Örneğin resmin üzerine gelindiğinde bir yazı gösterebildiğimiz gibi bir buton da gösterebiliriz. Yada daha farklı Html öğelerini. Bu tamamen bize kalmış bir durumdur.

Biz resmin üzerine gelince buton çıkması ve yazı çıkması örneklerini yapacağız.

Resmin Üzerine Gelince Buton Çıkması

Bu uygulamanın en çok kullanıldığı yerler E-Ticaret siteleridir.

Anasayfada ürünlerin listelendiği alanda her bir ürünün üzerine gelindiğinde Sepete Ekle butonu görünür. Bizim yapacağımız uygulama da bunun aynısı olacak. 

Kodlarımızı yazdıktan sonra uygulamamız şu şekilde olacak.  

resmin-uzerine-gelince-buton-cikmasi

Gördüğünüz gibi çanta resminin üzerine gelince Sepete Ekle butonu görünüyor. Resmin üzerinden ayrılınca da eski haline dönüyor.

Yazacağımız kodlar üzerinde istediğiniz değişiklikleri yaparak kendi web sayfalarınıza uygun hale getirebilirsiniz.

Html Image Overlay Kodları 

 ⇒  img etiketinin src niteliğine kullanmak istediğiniz resmin Url‘ini yazmalısınız. 

Css Image Overlay Kodları 

Resmin Üzerine Gelince Yazı Çıkması

Bu örneğimizde ise ürünün üzerine gelindiğinde ürün hakkında bazı bilgileri yazı olarak gösterelim.

Kodlarımızı yazdıktan sonra uygulamamız şu şekilde olacak.  

resmin-uzerine-gelince-yazi-cikmasi

Gördüğünüz gibi çanta resminin üzerine gelince ürün hakkında kısa bir bilgi görünüyor. Resmin üzerinden ayrılınca da eski haline dönüyor.

Yazacağımız kodlar üzerinde istediğiniz değişiklikleri yaparak kendi web sayfalarınıza uygun hale getirebilirsiniz.

Html Image Overlay Kodları 

 ⇒  img etiketinin src niteliğine kullanmak istediğiniz resmin Url‘ini yazmalısınız. 

Css Image Overlay Kodları 

Html ve Css kullanarak bu şekilde resmin üzerine gelindiğinde farklı Html öğelerini gösterebiliriz.

Umarım sizin için faydalı bir yazı olmuştur.

Şu yazılar da ilginizi çekebilir.

BOOTSTRAP 4 – IMAGES (RESİMLER)

Html Resim Ekleme

Html Resme Link Verme

Yeni bir yazımda görüşmek üzere.

Kaynaklar 

https://www.w3schools.com/

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link