Cara Membuat Efek Gambar Zoom Dan Rotate Menggunakan CSS

Cara Membuat Efek Gambar Zoom Dan Rotate Ketika Hover Menggunakan CSS Di WordPress. Terdapat banyak CSS instan untuk mendapatkan efek gambar zoom ketika hover yang apik apalagi ditambah dengan beberapa rotasi, penskalaan, pengaburan, dan lainnya. Di banyak Web modern sekarang ini terdapat banyak animasi di dalamnya. Misalnya Animasi sederhana yang memperbesar gambar saat hover dalam sebuah frame.

CSS adalah singkatan dari Cascading Style Sheets yang terdapat 3 versi yaitu CSS1, CSS2, dan CSS3. CSS adalah suatu aturan untuk mengatur beberapa komponen di dalam sebuah web sehingga membuat lebih terstruktur dan seragam. CSS3 merupakan versi CSS terbaru yang bisa melakukan banyak hal terkait desain website. CSS3 mampu membuat animasi warna sampai animasi 3D di halaman website.

CSS sangat membantu untuk mempercantik tampilan website seperti dengan memberi warna, box shadow, padding, margin, align, posisi, dll.

Dalam artikel kali ini Sharing teknologi (teknologi.visitklaten.com) akan berbagi cara membuat animasi gambar saat di hover tanpa menggunakan JavaScript. Yap benar tanpa menggunakan JavaScript dan hanya cukup menggunakan CSS saja. Langsung saja silakan lihat dibawah ini

Efek Gambar Zoom Dan Rotate Saat Hover Di WordPress

1. Basic

<div class="img-hover-zoom">
  <img src="https://teknologi.visitklaten.com/wp-content/uploads/2019/08/Efek-Zoom-Dan-Rotate.jpg" alt="Efek Zoom Dan Rotate">
</div>

.img-hover-zoom {
  width: 100%; 
  max-width: 500px; 
  height: 300px; 
  overflow: hidden;
  margin-bottom: 20px;
}
.img-hover-zoom img {
  transition: transform .5s ease;
    object-fit: cover;
    width: 100%;
    max-width: 500px;
    height: 300px;
}
.img-hover-zoom:hover img {
  transform: scale(1.5);
}

2. Quick zoom-in

<div class="img-hover-zoom img-hover-zoom--quick-zoom">
  <img src="https://teknologi.visitklaten.com/wp-content/uploads/2019/08/Efek-Zoom-Dan-Rotate.jpg" alt="Efek Zoom Dan Rotate">
</div>

.img-hover-zoom--quick-zoom img {
  transform-origin: 0 0;
  transition: transform .25s, visibility .25s ease-in;
}
.img-hover-zoom--quick-zoom:hover img {
  transform: scale(2);
}

3. Point-zoom

<div class="img-hover-zoom img-hover-zoom--point-zoom">
  <img src="https://teknologi.visitklaten.com/wp-content/uploads/2019/08/Efek-Zoom-Dan-Rotate.jpg" alt="Efek Zoom Dan Rotate">
</div>

.img-hover-zoom--point-zoom img {
  transform-origin: 65% 75%;
  transition: transform 1s, filter .5s ease-out;
}
.img-hover-zoom--point-zoom:hover img {
  transform: scale(5);
}

4. Zoom-n-rotate

<div class="img-hover-zoom img-hover-zoom--zoom-n-rotate">
  <img src="https://teknologi.visitklaten.com/wp-content/uploads/2019/08/Efek-Zoom-Dan-Rotate.jpg" alt="Efek Zoom Dan Rotate">
</div>

.img-hover-zoom--zoom-n-rotate img {
  transition: transform .5s ease-in-out;
}
.img-hover-zoom--zoom-n-rotate:hover img {
  transform: scale(2) rotate(25deg);
}

5. Zoom in slow-motion

<div class="img-hover-zoom img-hover-zoom--slowmo">
  <img src="https://teknologi.visitklaten.com/wp-content/uploads/2019/08/Efek-Zoom-Dan-Rotate.jpg" alt="Efek Zoom Dan Rotate">
</div>

.img-hover-zoom--slowmo img {
  transform-origin: 50% 65%;
  transition: transform 5s, filter 3s ease-in-out;
  filter: brightness(150%);
}
.img-hover-zoom--slowmo:hover img {
  filter: brightness(100%);
  transform: scale(3);
}

6. Brighten and Zoom-in

<div class="img-hover-zoom img-hover-zoom--brightness">
  <img src="https://teknologi.visitklaten.com/wp-content/uploads/2019/08/Efek-Zoom-Dan-Rotate.jpg" alt="Efek Zoom Dan Rotate">
</div>

.img-hover-zoom--brightness img {
  transition: transform 2s, filter 1.5s ease-in-out;
  transform-origin: center center;
  filter: brightness(50%);
}
.img-hover-zoom--brightness:hover img {
  filter: brightness(100%);
  transform: scale(1.3);
}

7. Horizontal Zoom-n-pan

<div class="img-hover-zoom img-hover-zoom--zoom-n-pan-h">
  <img src="https://teknologi.visitklaten.com/wp-content/uploads/2019/08/Efek-Zoom-Dan-Rotate.jpg" alt="Efek Zoom Dan Rotate">
</div>

.img-hover-zoom--zoom-n-pan-h img {
  transition: transform .5s ease-in-out;
  transform: scale(1.4);
  transform-origin: 100% 0;
}
.img-hover-zoom--zoom-n-pan-h:hover img {
  transform: scale(1.5) translateX(30%);
}

8. Vertical Zoom-n-pan

<div class="img-hover-zoom img-hover-zoom--zoom-n-pan-v">
  <img src="https://teknologi.visitklaten.com/wp-content/uploads/2019/08/Efek-Zoom-Dan-Rotate.jpg" alt="Efek Zoom Dan Rotate">
</div>

.img-hover-zoom--zoom-n-pan-v img {
  transition: transform .5s ease-in-out;
  transform: scale(1.4);
  transform-origin: 0 0;
}
.img-hover-zoom--zoom-n-pan-v:hover img {
  transform: scale(1.25) translateY(-30%);
}

9. Blur-out with Zooming-in

<div class="img-hover-zoom img-hover-zoom--blur">
  <img src="https://teknologi.visitklaten.com/wp-content/uploads/2019/08/Efek-Zoom-Dan-Rotate.jpg" alt="Efek Zoom Dan Rotate">
</div>

.img-hover-zoom--blur img {
  transition: transform 1s, filter 2s ease-in-out;
  filter: blur(2px);
  transform: scale(1.2);
}
.img-hover-zoom--blur:hover img {
  filter: blur(0);
  transform: scale(1);
}

10. Colorize with zooming-in

<div class="img-hover-zoom img-hover-zoom--colorize">
  <img src="https://teknologi.visitklaten.com/wp-content/uploads/2019/08/Efek-Zoom-Dan-Rotate.jpg" alt="Efek Zoom Dan Rotate">
</div>

.img-hover-zoom--colorize img {
  transition: transform .5s, filter 1.5s ease-in-out;
  filter: grayscale(100%);
}
.img-hover-zoom--colorize:hover img {
  filter: grayscale(0);
  transform: scale(1.1);
}

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan dan saran silakan hubungi kami atau silakan isi di kolom komentar/review.