CSS ile Üzerine Gelince Parlayan Resimler

Bu dersimizde sadece CSS3 tanımlarını kullanarak üzerine gelindiğinde parlayan görseller oluşturacağız. Bu işlemi yaparken efekti barındıracak bir çerçeve ve beraberinde de küçük çaplı bir animasyon tanımı hazırlayacağız.

Örneği incelediyseniz derse başlayalım.

ÖRNEĞİ GÖRÜNTÜLE

Resimlere parlaklık efekti nasıl verilir?

İlk olarak sıradan bir division içerisine resmimizi ekleyelim. Sonrasında da before ve hover tanımlamaları sayesinde de bu division çerçeve mantığında kullanıp içerisinde parlak isimli animasyonu döndürelim.

HTML Kodları

<div class="parlaklik">
  <img src="http://lorempixel.com/450/400/"/>
</div>

CSS Kodları

Parlaklık isimli division öğesinin çerçeve tanımlamalarını yapalım. Bu öğeyi relative yapıda tutup overflow hidden yapmamız süregelen parlaklık efektinin dışarılara taşmasını engelleyecektir. Before ile tanımlayacağımız ise parlaklık efektinin ta kendisi olacaktır. Sonrasında da hover halinde before’un vereceği tepkiyi hazırlayarak işlemi tamamlıyoruz.

div.parlaklik {
	width: 450px;
	height: 400px;
	overflow: hidden;
  position: relative;
}

div.parlaklik::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}

div.parlaklik:hover::before {
	-webkit-animation: parlak .75s;
	animation: shine .75s;
}

Son olarak parlak animasyonunu ekleyelim.

@-webkit-keyframes parlak {
	100% {
		left: 125%;
	}
}
@keyframes parlak {
	100% {
		left: 125%;
	}
}

Bitirmeden önce

CSS3‘ün bizlere sağladığı imkanlar sonsuz. Ancak hiç kuşku yok ki gelişen web teknolojileri ileriki günlerde bu efektleri tek bir satır kod yazarak yapmamızı da sağlayacaktır.

İyi çalışmalar.