Membuat Banner Blog Dengan CSS

Akhirnya jadi juga banner blog dengan sedikit sentuhan CSS. Kodenya sama dengan banner blog pada umumnya yang menggunakan format jpg atau gif, tapi diberi sedikit kode CSS.




Seperti ini bannernya, silahkan arahkan mouse pada banner dibawah, ketika mouse hover, foto akan bergeser ke kanan dan akan ada definisi blog yang merupakan link blog dengan target blank, atau terbuka tab baru bila di klik.

Ummiega, Islam, Blog, Google, CSS, Arab, Jepang

Bila berminat, ini kodenya. Tinggal rubah foto banner, link, dan deskripsi blog sendiri.

<style>
.hiding {
width:100px;
height: 100px;
overflow: hidden;
position: relative;
float: left;
}

.hiding img {
position: absolute;
top: 0;
right: 0;
}

/* CSS3 transitions */
.hiding img {
-webkit-transition: right 1s ease-in;
-moz-transition: right 1s ease-in;
-o-transition: right1s ease-in;
transition:right 1s ease-in;
}

.hiding:hover img {
right: -200px;
}
</style>
<div class="hiding"><a href='http://ummiega.blogspot.com'target="_blank"><img alt="CSS3 transitions image" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW0EFX3FiSBxSdt_uHfydx_5EWNVlwdfFdYDRzXMA2k-LPQRx9iKxaHWvZE0hTlTamBmNsidoPUbMcZUCpb9BABsRlDZapowtTGcq3nvtKDMGhkwAtXf-2wm4fvpCpvsLv7E7UsVxP_IFc/s220/cover%2520buku%2520jin220.jpg" width="100" /><br />
Ummiega, Islam, Blog, Google, CSS, Arab, Jepang</div>