Kategori Random

Trik Zoom Image View pada postingan dengan CSS

Posted : 23 September 2015 | 07:05:18 , Dibaca 2383 kali

Pada kesempatan kali saya akan berbagi tentang trik membuat zoom image pada postingan agar terlihat lebih cantik tidak berantakan. Untuk contoh bisa dilihat pada blog ini yaitu pada tampilan home pada menu popular pos yang disebelah kanan.

Seperti pada judul maka nantinya image pada postingan akan dizoom pada saat mouse diarahkan ke gambar, kali ini efek zoom saya manfaatkan pada daftar artikel yang memiliki gambar.

Baik mari kita mulai, untuk membuat efek zoom kita membutuhkan sebuah css buat seperti dibawah ini :

CSS

.container{
    width: 650px;
    margin: 10px auto;
}
.zoom-css{
    width: 300px;
    float: left;
    padding: 10px;
}

/* Image Hover Zoom */
a.mask {
	text-decoration: none;
	overflow: hidden;
	display: block;
    height:240px;
}
.mask {
	text-decoration: none;
	overflow: hidden;
	display: block;
    height:120px;
}
img.zoom-img {
	width: 100%;
	position: relative;
	padding: 0;
      top: 20%;


   margin-top: -50px; /* Half the height */

}
img.zoom-img {
	-webkit-transform: scale(1, 1);
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 250ms;
	-moz-transform: scale(1, 1);
	-moz-transition-timing-function: ease-out;
	-moz-transition-duration: 250ms;
	box-shadow: 0px 0px 0px 0px #000; /*Firefox opacity flickr bug fix */
}
img.zoom-img:hover {
	-webkit-transform: scale(1.15);
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 750ms;
	-moz-transform: scale(1.15);
	-moz-transition-timing-function: ease-out;
	-moz-transition-duration: 750ms;
	overflow: hidden;
	opacity: 0.7;
}

Kemudian mari kita praktekan skrip css diatas ke halaman artikel kita buat seperti dibawah ini :

HTML Code

<!DOCTYPE html>
<html>
<head>
  <title>Zoom Image - CSS</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>
<div class="container">
<div class="zoom-css">
<a href="#" class="mask">
<img src="./images/eclipse-android.jpg" alt="" class="zoom-img">
</a>
<p>Bagi agan-agan sebagai programmer pastinya sudah terbiasa dengan skrip code yang selalu di utak-atik. Ada source code pasti ada juga IDE (Integrated Development Environment) nya untuk mempermudah dalam pembacaan code agar mudah dipahami. Dreamwever atau RapidPHP adalah dua diantara beribu editor yang bisa kita gunakan dalam mengutak atik code skrip yang kita kerjakan.  ...</p>
<p><a href="#" class="btn btn-info btn-sm">Selengkapnya <i class="fa fa-angle-right"></i></a> </p>
</div>

<div class="zoom-css">
<a href="#" class="mask">
<img src="./images/HTML5_Logo_256.png" alt="" class="zoom-img">
</a>
<p>Kali ini saya repost dari tulisan dari laman sebelah, tulisan ini saya share karna cukup menarik untuk ditulis kembali. Programmer, bukan program manager sebuah acara reality show di televisi swasta ataupun sebuah acara joged joged gak jelas, melainkan seseorang yang mempunyai keterampilan dan keahlian dalam menuangkan algoritma dan bisnis proses ke sebuah kod ...</p>
<p><a href="#" class="btn btn-info btn-sm">Selengkapnya <i class="fa fa-angle-right"></i></a> </p>
</div>


<div class="zoom-css">
<a href="#" class="mask">
<img src="./images/css3.jpg" alt="" class="zoom-img">
</a>
<p>Fungsi helper sangat membantu kita dalam menangani berbagai macam akan diterapkan di tampilan akhir. Pada codeigniter sudah disediakan helper fungsi yang dapat membantu kita dalam menangani berbagai macam masalah. Namun tidak semua. ...</p>
<p><a href="#" class="btn btn-info btn-sm">Selengkapnya <i class="fa fa-angle-right"></i></a> </p>
</div>

<div class="zoom-css">
<a href="#" class="mask">
<img src="./images/mysql.gif" alt="" class="zoom-img">
</a>
<p>Seperti kita ketahui bahwa polling pada sebuah website berguna untuk melihat bagaimana respons dari user yang telah berkunjung ke website kita. Pada prinsipnya polling berisi sebuah pertanyaan dan kemudian ada beberapa jawaban pilihan dari pertanyaan tersebut. Kemudian setiap vote yang dilakukan oleh user pengunjung maka akan tersimpan pada sebuah file text maupun database dan kemudian kita tam ...</p>
<p><a href="#" class="btn btn-info btn-sm">Selengkapnya <i class="fa fa-angle-right"></i></a> </p>
</div>
</div>
</body>
</html>

Bagaimana cukup mudah bukan, kita sudah membuat zoom image dengan memanfaatkan css. Efek zoom ini bisa dimanfaatkan untuk keperluan lain seperti zoom gambar pada website penjualan.
Semoga bermanfaat.
 

Postingan Terkait
» Modal Bootstrap tahap III: Membawa kode unik ke modal ( 05 Apr 2017 | 06:24:03 , 862 hits )
» Modal Bootstrap tahap II : Membawa kode unik ke modal ( 04 Apr 2017 | 07:34:44 , 744 hits )
» Membuat Template Bootstrap dengan Cepat dan Gampang ( 12 Feb 2016 | 09:00:29 , 5029 hits )
» Membuat Modal Bootstrap PHP ( 19 Mar 2015 | 03:00:11 , 13877 hits )
» Bootstrap : Membuat Tab Horizontal ( 20 Feb 2015 | 04:58:20 , 5385 hits )