Gambar dengan Efek 3d yang Cantik (Belajar CSS)

Gambar dengan Efek 3d yang Cantik di blog tentunya dapat menambah nilai seni pada blog. Selain dengan menggunakan CSS Filter yang sering para blogger gunakan, kita juga bisa membuat efek-efek lain yang tak kalah cantiknya.

Bahkan efek-efek seperti yang ada pada instagram sebenarnya bisa kita ciptakan sendiri hanya dengan menggunakan CSS atau tepatnya CSS3

Pada Kesempatan ini, kita akan Belajar menggunakan CSS3 untuk membuat animasi pada gambar sehingga ketika gambar kita sorot, maka akan keluar tombol share yang tampak seperti 3D.

Teknik ini kayaknya masih sangat jarang dipakai oleh para blogger, hanya beberapa website saja yang menggunakannya. Untuk itu, tentunya ini menjadi peluang bagi kamu yang ingin membuat tampilan postingan blog kamu lebih interaktif, sehingga harapannya dapat menarik pengunjung blog kamu.

Untuk demo nya kamu bisa lihat pada halaman postingan yang ini ya : Pekerjaan dengan Penghasilan Tinggi untuk Orang yang Tidak Suka Matematika

Lalu Bagaimana Cara Membuat Efek Gambar 3D ini? Ayo Kita Mulai Saja Praktekan.

Langsung saja kita buat file htmlnya.

HTML

Silahkan salin kode html dibawah ini. Sesuaikan link dan gambar yang akan kamu tampilkan ya.

<div class="image-effect-fall-back">
		<div class="share-layer">
			<a href="#">
				<i class="fa fa-facebook"></i>
				Facebook
			</a>
			<a href="#">
				<i class="fa fa-twitter"></i>
				Twitter
			</a>
			<a href="#">
				<i class="fa fa-pinterest"></i>
				Pinterest
			</a>
		</div>
		<div class="image-layer">
			<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGPW9XgSVGDKPBIuOxA69q57Hl7mFin0JDl0S9DA6qvx6eVxGyvBExepSiuRuk6hgI-L67RA2kXAoLDVGud3j9Xs29Fp0Kt6Z-igec0FvwWiPOCbxq14V6kQbNzwX4GIi9V3ORsaVBNAk/s0/pekerjaan+dengan+penghasilan+tinggi.png" width="500" alt="California surf">
		</div>
	</div>
    

Yang perlu kamu perhatikan/ganti, hanya pada pemberian link dan gambarnya saja, sesuaikan dengan postingan kamu sendiri.

CSS

Agar efek pada div yang berisi gambar tersebut beranimasi ketika disorot, maka kita perlu kasih efek dengan menggunakan css berikut ini:

<style>
  .image-effect-fall-back{
			width: 500px;
			height: 300px;
			position: relative;
			margin: 0 auto;
			-webkit-perspective: 800px;
			perspective: 800px;
		}


		.image-effect-fall-back .image-layer{
			position: absolute;
			top:0;
			left: 0;
			height: 300px;
			-webkit-transition: 0.6s;
			transition: 0.6s;
			z-index: 1;
		}

		.image-effect-fall-back:hover .image-layer{
			-webkit-transform: rotateX(70deg);
			transform: rotateX(70deg);
			overflow: visible;
		}

		.image-effect-fall-back .image-layer img{
			height: 100%;
		}

		.image-effect-fall-back .image-layer:before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
			opacity: 0;

			-webkit-transition: all 0.5s;
			transition: all 0.5s;
			-webkit-transform: rotateX(114deg) translateZ(-26px)  translateY(110px) scale(0.75);
			transform: rotateX(114deg) translateZ(-26px)  translateY(110px) scale(0.75);
			-webkit-transform-origin: bottom;
			-ms-transform-origin: bottom;
			transform-origin: bottom;
		}

		.image-effect-fall-back:hover .image-layer:before {
			opacity: 0.3;
		}


		.image-effect-fall-back .share-layer{
			position: absolute;
			bottom: 100px;
			left: 0;
			width: 100%;
			height: 100px;
			opacity: 0;
			z-index: 10;
			
			-webkit-transition: 0.6s;
			transition: 0.6s;
			
			-webkit-transform: rotateX(70deg);
			transform: rotateX(70deg);
		}

		.image-effect-fall-back:hover .share-layer {
			opacity: 1;

			-webkit-transform: rotateX(0deg) translateY(-70px);
			transform: rotateX(0deg) translateY(-70px);
		}


		.bagikan{
			display: inline-block;
			text-decoration: none;
			color: #ffffff !important;
			padding: 5px 5px 5px 15px;
			width: 110px;
			border-radius: 2px;
			margin:	25px 10px;
		}

		.share-via-facebook{
			background-color:#3b5998;
		}

		.share-via-twitter{
			background-color:#00aced;
		}

		.share-via-google{
			background-color:#d34836;
		}
  .post-body h2 span {color:green}
	</style>