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.
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ı
|
1 2 3 4 5 6 7 8 |
<div class="hover-overlay-container"> <img class="overlay-image" src="" /> <div class="overlay-btn-container"> <a href="#" class="overlay-btn">Sepete Ekle</a> </div> </div> |
⇒ img etiketinin src niteliğine kullanmak istediğiniz resmin Url‘ini yazmalısınız.
Css Image Overlay Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<style> .hover-overlay-container { position: relative; width: 300px; } .hover-overlay-container:hover .overlay-image { opacity: 0.3; } .hover-overlay-container:hover .overlay-btn-container { opacity: 1; } .hover-overlay-container .overlay-image { display: block; width: 100%; height: auto; opacity: 1; transition: .5s ease; backface-visibility: hidden; } .hover-overlay-container .overlay-btn-container { position: absolute; top: 50%; left: 50%; opacity: 0; transition: .5s ease; text-align: center; transform: translate(-50%, -50%); } .hover-overlay-container .overlay-btn-container .overlay-btn { color: #fff; font-size: 16px; padding: 10px 16px; background-color: cornflowerblue; text-decoration: none; } </style> |
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.
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ı
|
1 2 3 4 5 6 7 8 |
<div class="hover-overlay-container"> <img class="overlay-image" src="" /> <div class="overlay-text-container"> <div class="overlay-text">Kahverengi Deri Çanta</div> </div> </div> |
⇒ img etiketinin src niteliğine kullanmak istediğiniz resmin Url‘ini yazmalısınız.
Css Image Overlay Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<style> .hover-overlay-container { position: relative; width: 300px; } .hover-overlay-container:hover .overlay-text-container { opacity: 1; } .hover-overlay-container .overlay-image { display: block; width: 100%; height: auto; } .hover-overlay-container .overlay-text-container { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #00AEEF; } .hover-overlay-container .overlay-text-container .overlay-text { color: #fff; font-size: 28px; position: absolute; top: 50%; left: 50%; text-align: center; transform: translate(-50%, -50%); } </style> |
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)
Yeni bir yazımda görüşmek üzere.
){kind=link}
bunları yan yana aralıklı koymak iin nasıl bir düzenleme yapabiliriz ?
lik yap denize at, balık bilmezse Halik bilir.Teşekürler.
Yorumunuz için ben teşekkür ederim.
merhaba ben şaban
güzel olmuş beğendim abi