Sudah dua tahun mungkin saya tidak menulis artikel dan ngeblog disini, tapi akhir-akhir ini saya sudah mulai ngeblogging di blog lain GW dan berkunjung-kunjung di blogger-blogger yang lainnya. entah mengapa beberapa hari lalu Gw dapet komentar yang merequest cara membuat gambar supaya kalo di sentuh atau di sortir oleh kursor mouse akan membesar dan terlihat dinamis sesuai pada tampilan template baru ini.
Sejenak aku berfikir apakah ini menggunakan jquery, tapi setelah saya teliti ternyata ini hanya menggunakan css transition effect. yah, logikanya gambar itu berada di dalam suatu wadah (div) kemudian bila wadah itu di dekati gambar itu maju menampakkan diri lebih besar, dan yang terpenting adalah apakah perbesaran gambar itu berada di dalam wadah ataukah keluar wadah, itu tergantung dari pengaturan css pada overflo-nya.
Ok, disini saya anggap pembaca sudah memahami dasar css, html, dan management folder. Pada percobaan yang saya lakukan, saya menyimpan pada folder dan menyimpan dengan nama coba.html yang sejajar dengan image yang bernama coba.jpg, silahkan semua bisa anda ganti. berikut yang saya tuliskan :
<html>
<head>
<title>Coba</title>
<style type="text/css>
._post-thumbnail-area {
width:200px; /* Thumbnail width */
height:200px; /* Thumbnail height */
background-color:#2D3957;float:left;overflow:hidden;}
._post-thumbnail {
display:block;
width:100%;
height:100%;
max-width:none;
max-height:none;
min-width:0;
min-height:0;
margin:0;
padding:0;
border:none;
outline:none;
position:static;
}
._post-thumbnail{
transition:all 500ms ease-in-out;
}
._post-thumbnail:hover{
-o-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transform:scale(1.3);
-o-transform:scale(1.3);
-webkit-transform:scale(1.3);
}
</style>
</head>
<body>
<div class='_post-part _post-thumbnail-area'>
<img class='_post-thumbnail' src='coba.jpg' height='72' width='72'/>
</div> <!-- ._post-thumbnail-area -->
</body>
</html>
Percobaan yang telah saya lakukan bukan untuk blogger, itu saya simpan dengan bentuk file html biasa.
Adapun untuk Blogger silahkan ikuti panduan berikut.,
Langkah 1 : Masuk ke template -> Edit HTML. Simpan Kode CSS berikut di atas
]]> </b:skin> atau
</style>
._post-thumbnail-area {
width:200px; /* Thumbnail width */
height:200px; /* Thumbnail height */
background-color:#2D3957;float:left;overflow:hidden;}
._post-thumbnail {
display:block;
width:100%;
height:100%;
max-width:none;
max-height:none;
min-width:0;
min-height:0;
margin:0;
padding:0;
border:none;
outline:none;
position:static;
}
._post-thumbnail{
transition:all 500ms ease-in-out;
}
._post-thumbnail:hover{
-o-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transform:scale(1.3);
-o-transform:scale(1.3);
-webkit-transform:scale(1.3);
}
Langkah 2 : Sesuaikan object gambar yang anda inginkan untuk di beri effect transition di bawah
<body>. dalam kasus pada template blog ini, berikut kodenya.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='_post-part _post-thumbnail-area'>
<b:if cond='data:post.thumbnailUrl'>
<img class='_post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' width='72'/>
</b:if>
</div> <!-- ._post-thumbnail-area -->
</b:if>
</b:if>
Warna merah merupakan kode yang sudah diatur secara global oleh css yang sudah tertulis.
Semoga bisa membantu bagi yang sudah request dan yang lainnya.,
bila ada kendala silahkan berkomentar.
Artikel Terkait : Css,Web-Design
Title : Gambar thumbnail membesar ketika di sortir dengan css transition effect
Description : Sudah dua tahun mungkin saya tidak menulis artikel dan ngeblog disini, tapi akhir-akhir ini saya sudah mulai ngeblogging di blog lain GW ...