Ana içeriğe atla

Resimlerinize Hover Efektli Açıklamalar Ekleme

Blogger Resimlere Hover Efektli Yazı Yazma Kodu

Bloglarınıza eklediğiniz resimlere fare ile üzerine gelindiğinde animasyonlu açıklamalı yazı çıkmasını sağlayan HTML kodu.

Kod açık ve istediğiniz gibi düzenleyebilirsiniz. Bloglarınıza bir değişiklik katmak yada yazı içi resimlerinizi hareketli duruma getirmek için kullanabilirsiniz. Sayfa içi kullanabileceğiniz gibi eklenti şeklinde de kullanabilirsiniz.

<style>
.imagepluscontainer {
/* main image container */
position: relative;
z-index: 1;
font-family: verdana;
font-size: 13px;
}
.imagepluscontainer img {
/* CSS for image within container */
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease;
/* Enable CSS3 transition on all props */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.imagepluscontainer:hover img {
/* CSS for image when mouse hovers over main container */
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.imagepluscontainer div.desc {
/* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1;
/* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0;
/* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8);
/* black bg with 80% opacity */
color: white;
-moz-border-radius: 0 0 8px 8px;
/* CSS3 rounded borders */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0;
/* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
/* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s;
/* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}
.imagepluscontainer div.desc a {
color: white;
}
.imagepluscontainer:hover div.desc {
/* CSS for desc div when mouse hovers over main container */
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity: 1;
/* Reveal desc DIV fully */
}
/*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/
.imagepluscontainer div.rightslide {
width: 150px;
/* reset from default */
top: 15px;
right: 0;
left: auto;
/* reset from default */
bottom: auto;
/* reset from default */
padding-left: 15px;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
}
.imagepluscontainer:hover div.rightslide {
-moz-transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}
/*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/
.imagepluscontainer div.leftslide {
width: 150px;
/* reset from default */
top: 15px;
left: 0;
bottom: auto;
/* reset from default */
padding-left: 15px;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
}
.imagepluscontainer:hover div.leftslide {
-moz-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
/*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/
.imagepluscontainer div.upslide {
top: 0;
bottom: auto;
/* reset from default */
padding-bottom: 10px;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
.imagepluscontainer:hover div.upslide {
-moz-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
transform: translate(0, -100%);
}
</style>
<center><div class="imagepluscontainer" style="width:263px;">
<a href="#">
</a><img src="RESİM URL">
<div class="desc downslide">
RESİM AÇIKLAMASI BURAYA</div>
</div></center><!--Author: webkenti.net-->



downslide: Animasyonlu açıklama kutusu aşağı doğru açılır bunu upslide(yukarı) , rightslide (sağda) leftslide(solda) ile değiştirip açıklama kutusunun açılma yönünü belirleyebilirsiniz.

<a href="#"> : Resime link vermek isterseniz # yerine istediğiniz url adresini yapıştırın.

width:263px: Açıklama kutusunun genişliği


HTML / JAVASCRIPT EKLEMEK

Widget (gadget) olarak eklemek için :
Blogger > Düzen > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

Sayfa içinde kullanmak için :
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.

* Canlı Demo için :
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
Kod Editörünü kullanabilirsiniz.

Yorumlar