Üzerine gelince üste çıkan başlıklar

By

başlık
Css3  ile  hazırlanmış kullanışlı bir hover efekti örneği. Bu css3 örneğinde mouse ile  resimlerin  üzerine geldiğinizde önce resim yukarı çıkıyor daha resmin yukarı kayma işlemi bitmeden hemen ardındanda resmin açıklamasının bulunduğu hover efekti yukarı çıkıyor. Mouseyide geri çektiğinizde yine aynı şekilde aşağı iniyorlar.

Hover efektinde resimlerin açıklamalarını girebilirsiniz ayrıca  bu bölümde birde twitter butonu bulunuyor. Bu buton paylaşmak için hazırlanmış değil ama siz  isterseniz paylaş butonu olarakta ayarlayabilirsiniz. Bu örnek ile çok güzel hover efektine sahip  fotoğraf  galerileri oluşturabilir  yada yazılarınıza eklemiş olduğunuz  resimlerde kullanabilirsiniz.

 

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölüm.

Css : 

@charset "utf-8";
/* CSS Document */

/* ---------- GENERAL ---------- */

body {
	background-color:#000000;
	font: 87.5%/1.5em sans-serif;
	margin: 0;
}

a {
	color: #ea4c89;
	text-decoration: none;
}

a:hover {
	color: #df3e7b;
}

h4 {
	color: #fff;
	margin: 0;
	padding: 0;
}

img {
	bottom: 0;
	display: block;
	height: auto;
	max-width: 100%;
}

figure {
	margin: 0;
}

p {
	margin: 0;
}

/* ---------- CLASSES ---------- */

.container {
	height: 312px;
	left: 50%;
	margin: -50px 0 0 -400px;
	position: absolute;
	top: 50%;
	width: 830px;
}

.button {
	background: #0084b4;
	border-radius: 3px;
	color: #fff;
	display: inline-block;
	font-weight: bold;
	padding: 4px 8px;
	position: absolute;
	right: 20px;
	top: 30px;
}

.button:hover {
	background: #2D76B9;
	color: #fff;
}

/* ---------- IMAGE-CONTAINER ---------- */

.image-container {
	border: 6px solid #fff;
	box-shadow: 0 0 5px rgba(0, 0, 0, .3);
	overflow: hidden;
	position: relative;
	width: 400px;
	float:left;
}

.image-container img {
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-ms-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
}

.image-container:hover img {
	-webkit-transform: translateY(-45px);
	-moz-transform: translateY(-45px);
	-ms-transform: translateY(-45px);
	-o-transform: translateY(-45px);
	transform: translateY(-45px);
}

.image-container:hover figcaption {
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition: -webkit-transform .4s, opacity .1s;
	-moz-transition: -moz-transform .4s, opacity .1s;
	-ms-transition: -ms-transform .4s, opacity .1s;
	-o-transition: -o-transform .4s, opacity .1s;
	transition: transform .4s, opacity .1s;
}

.image-container figcaption {
	background: #283449;
	bottom: 0;
	color: #fff;
	height: 50px;
	left: 0;
	opacity: 0;
	padding: 20px;
	position: absolute;
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-ms-transform: translateY(100%);
	-o-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transition: -webkit-transform .4s, opacity .1s .3s;
	-moz-transition: -moz-transform .4s, opacity .1s .3s;
	-ms-transition: -ms-transform .4s, opacity .1s .3s;
	-o-transition: -o-transform .4s, opacity .1s .3s;
	transition: transform .4s, opacity .1s .3s;
	width: 360px;
}
  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

	
Rhinoceros

Rhinoceros

by @Mintikdotcom

Twitter
Gorilla

Gorilla

by @Mintikdotcom

Twitter
Tiger

Tiger

by @Mintikdotcom

Twitter
Giraffe

Giraffe

by @Mintikdotcom

Twitter


Leave a Comment

Your email address will not be published.

You may also like

Trend