Memperbesar Gambar Posting Dengan Menggunakan CSS3

Image enlarger dengan menggunakan CSS3 ini adalah khusus untuk posting yang melibatkan penggunaan gambar. Gambar hanya akan ditampilkan dalam ukuran kecil (thumbnail) dengan lebar (width) dan tinggi (height) sebesar masing-masing 110px. Dengan menyentuhkan cursor pada thumbnail, maka gambar akan menjadi besar dengan ukuran lebar (width) sebesar 400px sedang tingginya menyesuaikan dengan gambar yang diposting. Dengan menggunakan metode seperti ini diharapkan halaman posting menjadi lebih menarik dan lebih mampu memuat teks tanpa mengurangi kemampuannya dalam menampilkan gambar berukuran besar.

Untuk meciptakan desain halaman posting yang tetap terjaga, dimana perbesaran gambar tidak mempengaruhi tatanan posting, desain telah disesuaikan dengan menggunakan kode CSS untuk membuat teks atau gambar lain tetap diposisi semula saat cursor menyentuh gambar (thumnail) dan proses perbesaran gambar terjadi. Position absolute dan penambahan DIV dalam bentuk float left membuat semua ini mungkin terjadi. Untuk meletakkan gambar baru (ke-2, ke-3 dst), cukup batasi dengan menggunakan tag p dalam bentuk :

Dengan menggunakan posting gambar seperti disamping, maka kita tidak perlu menampilkan gambar dalam ukuran besar yang terlalu banyak menyita halaman posting. Cukup ditampilkan dalam bentuk seperti ini, maka gambar bisa dilihat dalam ukuran besar hanya dengan membawa cursor di atas gambar.

Menampilkan posting yang disertai gambar dalam bentuk seperti ini tentunya akan membuat blog bertambah menarik. Jangan kuwatir tentang penggunaan kode. menambah fungsi seperti ini sangat mudah karena hanya perlu menggunakan beberapa kode CSS sebagai pembangun fungsi, serta beberapa kode HTML untuk posting. Sangat simple dan mudah dilakukan siapapun, bahkan pemula sekalipun.

Bagaimana dengan ukuran gambar yang digunakan? Ini sangat praktis karena seberapapun besar gambar yang digunakan, maka gambar akan ditampilkan dalam ukuran lebar 400px (width), sedang tinggi (height) akan menyesuaikan dengan gambar (image) aslinya.

Anda dapat melakukannya dengan merubah kode CSS yang berkaitan dengan width untuk disesuaikan dengan lebar halaman posting. Ukuran 400px disini hanya dilakukan dengan pertimbangan banyak blogger yang menggunakan halaman posting dengan ukuran berkisar 400px. Bila anda menggunakan halaman yang lebih besar, silahkan untuk sedikit melakukan perubahan width pada syntax di kode CSSnya.

CSS

img.CSS_Enlarger  {
position: absolute;
cursor: pointer;
display: block;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border: 3px solid #555;
padding: 4px;
background: #000;
margin: 0 10px 5px 0px;
opacity: 0.6;
height: 110px;
width: 110px;
-o-transition: width 1s ease-in 400ms, opacity 1.2s ease-in 1.2s, border 1.2s linear 2.5s;
-moz-transition: width 1s ease-in 400ms, opacity 1.2s ease-in 1.2s, border 1.2s linear 2.5s;
-webkit-transition: width 1s ease-in 400ms, opacity 1.2s ease-in 1.2s, border 1.2s linear 2.5s;
}
img.CSS_Enlarger:hover {
-o-transition: width 1s ease-in 400ms, opacity 1.2s ease-in 1,2s, border 1.2s linear 2.5s;
-moz-transition: width 1s ease-in 400ms, opacity 1.2s ease-in 1,2s, border 1.2s linear 2.5s;
-webkit-transition: width 1s ease-in 400ms, opacity 1.2s ease-in 1,2s, border 1.2s linear 2.5s;
opacity: 1.0;
z-index: 9;
border: 10px solid #fff;
width: 400px;
height: auto;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: #aaa;
box-shadow: 1px 1px 10px #000;
-moz-box-shadow: 1px 1px 10px #000;
-webkit-box-shadow: 1px 1px 10px #000;
}
.left_CSS_Enlarger {
float:left;
width: 135px; 
height: 130px; 
}

]]></b:skin>

<!--[if IE]>
<style type="text/css">
img.CSS_Enlarger { filter: alpha(opacity=60);}
img.CSS_Enlarger:hover { height: auto; width: 400px; filter: alpha(opacity=100); border: 10px solid #ddd;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=135, Strength=10);}
</style>
<![endif]-->

• KLIK "Login".

HTML

<div class="left_CSS_Enlarger"></div><img class="CSS_Enlarger" src="#image-1.jpg" /> Tuliskan teks di sini! 
<p><div class="left_CSS_Enlarger"></div><a href="#link-image-2"><img class="CSS_Enlarger" src="#image-2.jpg" /> </a>Tuliskan teks di sini! </p>
<p><div class="left_CSS_Enlarger"></div><a href="#link-image-3"><img class="CSS_Enlarger" src="#image-3.jpg" /> </a>Tuliskan teks di sini! </p>