Един ефект на изображения в публикацията

Pepa Tabakova

четвъртък

Ефект на падащо описание на изображението

Добър ден, скъпи приятели, читатели и посетители на блога. Днес ви пиша за това как да си направите красиво падащо описание за изображения в публикациите. Оказва се, че ефектът е и доста добър. Пести място в публикацията. Особено, когато в нея има няколко на брой изображения, за всяко от които се налага отделно допълнително описание.
Описанието ще се появи, когато задържите курсора върху изображението. В допълнение, инсталирането му е много лесно. Кодът се състои от две части - CSS и HTML част. Можете да го инсталирате по два начина.
➤Ако смятате да използвате постоянно този ефект за вашите изображения в блога си, то CSS кода сложете директно в шаблона на блога преди реда ]]></b:skin>.

.imagepluscontainer{

position: relative;

z-index: 1;

}

.imagepluscontainer img{

position: relative;

z-index: 2;

-moz-transition: all 0.5s ease;

-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{

-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{

position: absolute;

width: 90%;
z-index: 1;
bottom: 0;
left: 5px;
padding: 8px;
background: #c0c0c0;
color: #000000;
-moz-border-radius: 0 0 8px 8px;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0;
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-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;
-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{
-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;
}

След това, когато пишете публикацията си, на мястото, където ще е поставено изображението, в HTML режим поставете втората част на кода.

<div class="imagepluscontainer" style="height: 199px; width: 220px; z-index: 2;">
<img src=" Адрес на вашето изображение" />
<br />
<div class="desc">
Описание на изображението
</div>
</div>

➤Ако ще използвате много рядко този ефект, тогава и двата кода можете да поставите в редактора на публикацията в HTML режим един след друг. Първо CSS кода, затворен от маркерите <style> и </style> и веднага след него HTML кода. Ето така.

</stile>

Обръщам внимание и на това, че крайния резултат от ефекта на падащото описание на изображението ще се вижда след публикуването.

Стойностите в кода, подчертани в синьо са: width: 90%; е ширината на изскачащия прозорец с описанието. За да се вижда коректно изображението може да се наложи да се промени към по-голяма или по-малка стойност. А background: rgb(192,192,192); е цвета на фона.
И една полезна връзка – конвертор на кодовете на цветовете. От RGB в HTML и обратно.

Разгледайте този ефект тук и направете корекции в кодовете, ако нещо в тях не ви допада.
Пожелавам ви ефектни изображения в публикациите!

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

Cancel

PEPA TABAKOVA