Membuat Image Hover Zoom n’ Rotate

Sharing Teknologi – Membuat Image Hover Zoom n’ Rotate HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Image Hover Zoom n Rotate HTML CSS Di WordPress. 

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, dan efek pengetikan atau typing effect .

HTML (Hypertext markup language) adalah sebuah bahasa markah (markup language) yang paling mendominasi saat ini dalam hal pembuatan sebuah website.

Dengan adanya HTML, maka sebuah website bisa dikreasikan sedemikian rupa menjadi lebih interaktif dan menarik. Karena HTML memadukan berbagai elemen seperti teks, multimedia, dan link, dan juga elemen pendukung lainnya menjadi sebuah kesatuan.

Sebelumnya kami mengucapkan banyak terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi..

Di kesempatan kali ini, kami akan berbagi tutorial Membuat Image Hover Zoom n Rotate Menggunakan HTML CSS. 

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Image Hover Zoom n’ Rotate

Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan. 

HTML

<div class="frame-img-hover-new row mb-4 mx-0">
	<div class="col-sm-6 mb-3">
		<div class="img-hover-zoom img-hover-zoom--basic">
			<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/07/Membuat-Timeline-Menggunakan-HTML-CSS.webp" alt="img-hover-zoom--basic"/>
		</div>
		<div class="img-hover-zoom-title h5 textfrost-gradient mt-2 font-weight-bold text-center">Basic</div>
	</div> <!----tutup col---->
	
	<div class="col-sm-6 mb-3">
		<div class="img-hover-zoom img-hover-zoom--quick-zoom">
			<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/07/Membuat-Div-Vertically-Horizontally-Centered-HTML-CSS.webp" alt="img-hover-zoom--quick-zoom"/>
		</div>
		<div class="img-hover-zoom-title h5 textfrost-gradient mt-2 font-weight-bold text-center">Quick-zoom</div>
	</div> <!----tutup col---->
	
	<div class="col-sm-6 mb-3">
		<div class="img-hover-zoom img-hover-zoom--point-zoom">
			<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/07/Membuat-Animate-Icons-JavaScript-HTML-CSS.webp" alt="img-hover-zoom--point-zoom"/>
		</div>
		<div class="img-hover-zoom-title h5 textfrost-gradient mt-2 font-weight-bold text-center">Point-zoom</div>
	</div> <!----tutup col---->
	
	<div class="col-sm-6 mb-3">
		<div class="img-hover-zoom img-hover-zoom--zoom-n-rotate">
			<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/07/Membuat-Countdown-Timer-JavaScript-HTML-CSS.webp" alt="img-hover-zoom--zoom-n-rotate"/>
		</div>
		<div class="img-hover-zoom-title h5 textfrost-gradient mt-2 font-weight-bold text-center">Zoom-n-rotate</div>
	</div> <!----tutup col---->
	
	<div class="col-sm-6 mb-3">
		<div class="img-hover-zoom img-hover-zoom--slowmo">
			<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/07/Membuat-Link-Hover-Effects-HTML-CSS.webp" alt="img-hover-zoom--slowmo"/>
		</div>
		<div class="img-hover-zoom-title h5 textfrost-gradient mt-2 font-weight-bold text-center">Slowmo</div>
	</div> <!----tutup col---->
	
	<div class="col-sm-6 mb-3">
		<div class="img-hover-zoom img-hover-zoom--brightness">
			<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/06/Membuat-Box-Shadow-3D-Menggunakan-CSS.webp" alt="img-hover-zoom--brightness"/>
		</div>
		<div class="img-hover-zoom-title h5 textfrost-gradient mt-2 font-weight-bold text-center">Brightness</div>
	</div> <!----tutup col---->
	
	<div class="col-sm-6 mb-3">
		<div class="img-hover-zoom img-hover-zoom--zoom-n-pan-h">
			<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/06/Membuat-Multiple-Box-Shadow-Menggunakan-CSS.webp" alt="img-hover-zoom--zoom-n-pan-h"/>
		</div>
		<div class="img-hover-zoom-title h5 textfrost-gradient mt-2 font-weight-bold text-center">Horizontal Zoom-n-pan</div>
	</div> <!----tutup col---->
	
	<div class="col-sm-6 mb-3">
		<div class="img-hover-zoom img-hover-zoom--zoom-n-pan-v">
			<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/06/Membuat-Box-Shadow-Menggunakan-CSS.webp" alt="img-hover-zoom--zoom-n-pan-v"/>
		</div>
		<div class="img-hover-zoom-title h5 textfrost-gradient mt-2 font-weight-bold text-center">Vertical Zoom-n-pan</div>
	</div> <!----tutup col---->
	
	<div class="col-sm-6 mb-3">
		<div class="img-hover-zoom img-hover-zoom--blur">
			<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/06/Membuat-Border-Pelangi-Menggunakan-CSS.webp" alt="img-hover-zoom--blur"/>
		</div>
		<div class="img-hover-zoom-title h5 textfrost-gradient mt-2 font-weight-bold text-center">Blur-zoom</div>
	</div> <!----tutup col---->
	
	<div class="col-sm-6 mb-3">
		<div class="img-hover-zoom img-hover-zoom--colorize">
			<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/06/Membuat-Kalkulator-Menggunakan-HTML-CSS.webp" alt="img-hover-zoom--colorize"/>
		</div>
		<div class="img-hover-zoom-title h5 textfrost-gradient mt-2 font-weight-bold text-center">Colorize</div>
	</div> <!----tutup col---->
</div>

CSS

/* The Image container */
.frame-img-hover-new  .img-hover-zoom {
  height: 250px; /* Modify this according to your need */
  overflow: hidden; /* Removing this will break the effects */
    border-radius: 0.5em;
    border: 5px solid rgb(241 241 241);
}

/* [1] The container */
.frame-img-hover-new  .img-hover-zoom {
  height: 250px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.frame-img-hover-new  .img-hover-zoom img {
  transition: transform .5s ease;
  height: 250px; 
  object-fit:cover;
}

/* [3] Finally, transforming the image when container gets hovered */
.frame-img-hover-new  .img-hover-zoom:hover img {
  transform: scale(1.5);
}

/* ##### Quick zoom-in #### */
/* Quick-zoom Container */
.frame-img-hover-new  .img-hover-zoom--quick-zoom img {
  transform-origin: 0 0;
  transition: transform .25s, visibility .25s ease-in;
}

/* The Transformation */
.frame-img-hover-new  .img-hover-zoom--quick-zoom:hover img {
  transform: scale(2);
}

/* ##### Point-zoom #### */
/* Point-zoom Container */
.frame-img-hover-new  .img-hover-zoom--point-zoom img {
  transform-origin: 65% 75%;
  transition: transform 1s, filter .5s ease-out;
}

/* The Transformation */
.frame-img-hover-new  .img-hover-zoom--point-zoom:hover img {
  transform: scale(5);
}


/* ##### Zoom-n-rotate #### */
/* Zoom-n-rotate Container */
.frame-img-hover-new  .img-hover-zoom--zoom-n-rotate img {
  transition: transform .5s ease-in-out;
}

/* The Transformation */
.frame-img-hover-new  .img-hover-zoom--zoom-n-rotate:hover img {
  transform: scale(2) rotate(25deg);
}

/* ##### Zoom in slow-motion #### */
/* Slow-motion Zoom Container */
.frame-img-hover-new  .img-hover-zoom--slowmo img {
  transform-origin: 50% 65%;
  transition: transform 5s, filter 3s ease-in-out;
  filter: brightness(150%);
}

/* The Transformation */
.frame-img-hover-new  .img-hover-zoom--slowmo:hover img {
  filter: brightness(100%);
  transform: scale(3);
}

/* ##### Brighten and Zoom-in #### */
/* Brightness-zoom Container */
.frame-img-hover-new  .img-hover-zoom--brightness img {
  transition: transform 2s, filter 1.5s ease-in-out;
  transform-origin: center center;
  filter: brightness(50%);
}

/* The Transformation */
.frame-img-hover-new  .img-hover-zoom--brightness:hover img {
  filter: brightness(100%);
  transform: scale(1.3);
}

/* ##### Horizontal Zoom-n-pan #### */
/* Horizontal Zoom-n-pan Container */
.frame-img-hover-new  .img-hover-zoom--zoom-n-pan-h img {
  transition: transform .5s ease-in-out;
  transform: scale(1.4);
  transform-origin: 100% 0;
}

/* The Transformation */
.frame-img-hover-new  .img-hover-zoom--zoom-n-pan-h:hover img {
  transform: scale(1.5) translateX(30%);
}

/* ##### Vertical Zoom-n-pan #### */
/* Vertical Zoom-n-pan Container */
.frame-img-hover-new  .img-hover-zoom--zoom-n-pan-v img {
  transition: transform .5s ease-in-out;
  transform: scale(1.4);
  transform-origin: 0 0;
}

/* The Transformation */
.frame-img-hover-new  .img-hover-zoom--zoom-n-pan-v:hover img {
  transform: scale(1.25) translateY(-30%);
}

/* ##### Blur-out with Zooming-in #### */
/* Blur-zoom Container */
.frame-img-hover-new  .img-hover-zoom--blur img {
  transition: transform 1s, filter 2s ease-in-out;
  filter: blur(2px);
  transform: scale(1.2);
}

/* The Transformation */
.frame-img-hover-new  .img-hover-zoom--blur:hover img {
  filter: blur(0);
  transform: scale(1);
}

/* ##### Colorize with zooming-in #### */
/* Colorize-zoom Container */
.frame-img-hover-new  .img-hover-zoom--colorize img {
  transition: transform .5s, filter 1.5s ease-in-out;
  filter: grayscale(100%);
}

/* The Transformation */
.frame-img-hover-new  .img-hover-zoom--colorize:hover img {
  filter: grayscale(0);
  transform: scale(1.1);
}

Hasil

Tampilannya kurang lebih bisa dilihat dibawah ini. Silakan hover atau arahkan kursor ke image.

Basic

Quick-zoom

Point-zoom

Zoom-n-rotate

Slowmo

Brightness

Horizontal Zoom-n-pan

Vertical Zoom-n-pan

Blur-zoom

Colorize

Terima kasih telah mengunjungi website kami.

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