Merhabalar, bu yazımda bazı temalarda rastladığım ve Facebook Frontend grubunda paylaşılıp dikkatimi çeken CSS ile farklı hoverlar yapımını göstereceğim. Günümüzde standart arkaplan değiştirme, yazı rengini değiştirme tarzında hover efektlerine çok denk geliyoruz. İşte bu yazımla tamamen o hover efektlerini unutun ve modern efektlerle tanışın! Tamamen yeni tarayıcılarla uyumlu olup hatasız çalışan ve modern tasarımlar için hazırlanmış hover efektleridir. Öncelikle post kısmını oluşturuyoruz

<div class="grid">

	<figure class="effect-lily">
		<img src="img/1.jpg" alt="img01"/>
		<figcaption>
			<h2>Nice <span>Lily</span></h2>
			<p>Lily likes to play with crayons and pencils</p>
			<a href="#">View more</a>
		</figcaption>			
	</figure>

	<!-- ... -->
	
</div>

post kısmını oluşturduktan sonra ise css dosyamıza işlevi tamamlaması için gerekli csslerimizi ekliyoruz.

figure.effect-sadie figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
	content: '';
	opacity: 0;
	transform: translate3d(0,50%,0);
}

figure.effect-sadie h2 {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	color: #484c61;
	transition: transform 0.35s, color 0.35s;
	transform: translate3d(0,-50%,0);
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie p {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2em;
	width: 100%;
	opacity: 0;
	transform: translate3d(0,10px,0);
}

figure.effect-sadie:hover h2 {
	color: #fff;
	transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
	opacity: 1;
	transform: translate3d(0,0,0);
}

İsterseniz paylaştığım örneği kendinize göre basitçe düzenleyebilirsiniz ve ya tüm örnekleri buradan inceleyip kaynak kodlarına da buradan ulaşabilirsiniz.

kaynak:codrops

Hoşçakalın! Kaydet