Membuat efek zoom pada gambar dengan css

Efek zoom pada sebuah gambar dalam sebuah website akan memberikan kesan yang indah pada tampilanya.

Dan pada kali ini, kita akan coba membuat efek zoom pada gambar dengan menggunakan html dan css saja. Script ini tergolong sangat sederhana, karena tidak menggunakan sebuah plugin dari JavaScript.


Walaupun hanya menggunakan css saja, script ini cukup berfungsi dengan baik, dan mudah di aplikasikan dalam website tentunya.

Berikut script efek zoom pada gambar

CSS SCRIPT

body {
	font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
	background: #eee;
	font-weight: 400;
	font-size: 15px;
	color: #aa3e03;
	overflow-y: scroll;
	overflow-x: hidden;
}

.container {
	position: relative;
	text-align: center;
}
.clr {
	clear: both;
}

.top {
	font-family: Arial, sans-serif;
	line-height: 24px;
	font-size: 11px;
	width: 100%;
	background: #000;
	text-transform: uppercase;
	position: relative;
	-moz-box-shadow: 1px 0px 2px #000;
	-webkit-box-shadow: 1px 0px 2px #000;
	box-shadow: 1px 0px 2px #000;
	margin-bottom: 50px;
}
.top a {
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #fff;
	display: block;
	float: left;
	text-decoration: none;
	font-weight: bold;
}
.top a:hover {
	color: #ffff00;
}
.top span.right {
	float: right;
}
.top span.right a {
	float: none;
	display: inline;
}

.zoom {
	width: 100%;
	max-width: 200px;
	-webkit-transform:scale(0.8);
	-moz-transform:scale(0.8);
	-o-transform:scale(0.8);
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	background-color:#666;
	border:3px #666 solid;
	border-radius:12px;
	opacity: 0.8;
	margin: 0 10px 5px 0;
}
.zoom:hover {
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-o-transform:scale(1.1);
	border:3px #f00 solid;
	box-shadow:0px 0px 30px gray;
	-webkit-box-shadow:0px 0px 30px gray;
	-moz-box-shadow:0px 0px 30px gray;
	opacity: 1;
	cursor:pointer;
}


HTML SCRIPT

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<title> Membuat efek zoom pada gambar dengan css </title>
</head>
<body>

<div class="container">
    <div class="top">
        <a href="https://my-id.site/tag/free-script/" title="Free Script">
            Free script
        </a>
        <span class="right">
            <a href="https://my-id.site" title="My-ID Home">
                Homepage
            </a>
        </span>
        <div class="clr"></div>
    </div>

	<img src="https://my-id.site/images/bg/a1.jpg" class="zoom" alt="Zoom effect" />
	<img src="https://my-id.site/images/bg/a2.jpg" class="zoom" alt="Zoom effect" />
	<img src="https://my-id.site/images/bg/a3.jpg" class="zoom" alt="Zoom effect" />
	<img src="https://my-id.site/images/bg/a4.jpg" class="zoom" alt="Zoom effect" />

</div>
</body>
</html>


Anda bisa menggabungkan script css dan html dalam bentuk internal css ataupun external css. Panduan singkat mengenai internal dan external css, silahkan baca di https://my-id.site/tutorial-dasar-css/

Untuk melihat hasil script diatas dan mengedit-nya secara online, silahkan Anda gunakan Realtime HTML Editor yang telah kami sediakan.

Demikian dan sampai disini pembahasan tentang free script kali ini, dan salam sukses untuk Anda semua.

Mungkin Anda Menyukai