CSS Membuat Caption Image lebih Atraktif dan Gaya dengan CSS sebagian orang akan senang ketika blog atau Web nya bisa memberikan perbedaan dengan blog/web lainnya. Sekarang kita akan coba membuat tampilan image dalam blog kita lebih variatif dan atraktif dengan bantuan CSS.
Lihat Contohnya dibawah ini :
Jika tertarik kamu bisa mengambil scriptnya dibawah ini sob.
1. HTML
<div class="view">
<img src="URL_IMAGE" />
<div class="mask">
<h4> Title </h4>
<p> Caption </p>
<a href="#" class="info"> Text Button </a>
</div>
</div>
2. CSS
<style>Oke silahkan dicoba dan disesuaikan dengan kebutuhan masing-masing hee.
.view {
border: 10px solid #FFF;
cursor: pointer;
height: 188px;
margin: 0 auto;
overflow: hidden;
position: relative;
text-align: center;
width: 300px;
}
.view img {
display: block;
position: relative;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
opacity: 1;
filter: alpha(opacity=100);
}
.view:hover img {
-moz-transform: rotate(720deg) scale(0);
-webkit-transform: rotate(720deg) scale(0);
-o-transform: rotate(720deg) scale(0);
-ms-transform: rotate(720deg) scale(0);
transform: rotate(720deg) scale(0);
opacity: 0;
filter: alpha(opacity=0);
}
.view .mask {
background-color: #ABC;
height: 188px;
left: 0;
position: absolute;
overflow: hidden;
top: 0;
width: 300px;
-moz-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
opacity: 0;
filter: alpha(opacity=0);
}
.view:hover .mask {
-moz-transform: translateY(0px) rotate(0deg);
-webkit-transform: translateY(0px) rotate(0deg);
-o-transform: translateY(0px) rotate(0deg);
-ms-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
-moz-transition-delay: 0.4s;
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
opacity: 1;
filter: alpha(opacity=100);
}
.view h4 {
background-color: rgba(255, 255, 255, 0.5);
color: #FFF;
text-align: center;
position: relative;
font-family: Georgia;
font-size: 20px;
margin: 20px 0 0 0;
padding: 5px 0;
text-shadow: 0 3px 1px #000;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover h4 {
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.7s;
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.view p {
color: #000;
font-family: Tahoma;
font-size: 13px;
margin: 0;
padding: 15px;
position: relative;
text-align: center;
text-shadow: 1px 1px 1px #FFF;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover p {
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.6s;
-webkit-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.view a.info {
background-color: #456;
border-radius: 5px;
box-shadow: 0 0 2px #FFF, 0 0 5px #FFF inset;
color: #FFF;
display: inline-block;
padding: 7px 14px;
text-decoration: none;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view a.info:hover {
box-shadow: 0 0 5px #FFF;
}
.view:hover a.info {
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}
</style>
^_^
Salam Blogger Donomulyo.