PHP-Fusion.at - Offizielle Supportseite für PHP-Fusion

Tutorials

Eine immer größer werdende Tutorialdatenbank.

PHP-Fusion Core

Aktuelle PHP-Fusion Vollversionen und Updates

Addon Downloads

Alle Downloads garantiert Kostenlos

Support 24/7

24 Stunden, 7 Tage die Woche, das ganze Jahr.

Du hast in deinem Browser kein Javascript aktiviert.
Um diese Seite korrekt anzuzeigen ist Javascript jedoch zwingend nötig.
Bitte aktiviere Javascript in den Einstellungen deines Browser beziehungsweiße besorge dir einen Browser, der diesen unterstützt.
Mozilla Firefox | Safari | Opera | Google Chrome | Internet Explorer höher Version 6

CSS3 Hover Animation 3

Kategorie: CSS

PHP-Fusion Version: Keine

Quelle: http://hasinhayder.github.io/ImageCaptionHoverAnimation/

Schwierigkeitsgrad:

Ein schöner Hoveranimationseffekt, der nur mit CSS realisiert wird und kein Javascript benötigt.

Faq

HTML-Code

GeSHi: HTML

<div class="container-a3">
		<ul class="caption-style-3">
			<li>
				<img src="img/chaps_1x.jpg" alt="">
				<div class="caption">
					<div class="blur"></div>
					<div class="caption-text">
						<h1>Amazing Caption</h1>
						<p>Whatever It Is - Always Awesome</p>
					</div>
				</div>
			</li>
			<li>
				<img src="img/everycowboy_dribbbleready_shot.jpg" alt="">
				<div class="caption">
					<div class="blur"></div>
					<div class="caption-text">
						<h1>Amazing Caption</h1>
						<p>Whatever It Is - Always Awesome</p>
					</div>
				</div>
			</li>
			<li>
				<img src="img/ithinkican_01.jpg" alt="">
				<div class="caption">
					<div class="blur"></div>
					<div class="caption-text">
						<h1>Amazing Caption</h1>
						<p>Whatever It Is - Always Awesome</p>
					</div>
				</div>
			</li>
			<li>
				<img src="img/m.jpg" alt="">
				<div class="caption">
					<div class="blur"></div>
					<div class="caption-text">
						<h1>Amazing Caption</h1>
						<p>Whatever It Is - Always Awesome</p>
					</div>
				</div>
			</li>
			<li>
				<img src="img/raspberry.jpg" alt="">
				<div class="caption">
					<div class="blur"></div>
					<div class="caption-text">
						<h1>Amazing Caption</h1>
						<p>Whatever It Is - Always Awesome</p>
					</div>
				</div>
			</li>
			<li>
				<img src="img/sketch_1x.jpg" alt="">
				<div class="caption">
					<div class="blur"></div>
					<div class="caption-text">
						<h1>Amazing Caption</h1>
						<p>Whatever It Is - Always Awesome</p>
					</div>
				</div>
			</li>
		</ul>
	</div>
gewandelt in 0.003 Sekunden, benutzt wurde GeSHi 1.0.8.10

CSS

GeSHi: CSS

h1,h2,h3,h4{
		padding: 0px;
		margin: 0px;
	}
 
	.caption-style-3{
		list-style-type: none;
		margin: 0px;
		padding: 0px;
 
	}
 
	.caption-style-3 li{
		float: left;
		padding: 0px;
		position: relative;
		overflow: hidden;
	}
 
	.caption-style-3 li:hover .caption{
		opacity: 1;
		transform: translateY(-100px);
		-webkit-transform:translateY(-100px);
		-moz-transform:translateY(-100px);
		-ms-transform:translateY(-100px);
		-o-transform:translateY(-100px);
	}
 
	.caption-style-3 li:hover img{
		opacity: 1;
		transform: translateY(-40px);
		-webkit-transform:translateY(-40px);
		-moz-transform:translateY(-40px);
		-ms-transform:translateY(-40px);
		-o-transform:translateY(-40px);
 
	}
 
 
	.caption-style-3 img{
		margin: 0px;
		padding: 0px;
		float: left;
		z-index: 4;
	}
 
 
	.caption-style-3 .caption{
		cursor: pointer;
		position: absolute;
		opacity: 0;
		top:300px;
		-webkit-transition:all 0.15s ease-in-out;
		-moz-transition:all 0.15s ease-in-out;
		-o-transition:all 0.15s ease-in-out;
		-ms-transition:all 0.15s ease-in-out;
		transition:all 0.15s ease-in-out;
 
	}
 
	.caption-style-3 img{
		-webkit-transition:all 0.15s ease-in-out;
		-moz-transition:all 0.15s ease-in-out;
		-o-transition:all 0.15s ease-in-out;
		-ms-transition:all 0.15s ease-in-out;
		transition:all 0.15s ease-in-out;
 
	}
	.caption-style-3 .blur{
		background-color: rgba(142, 68, 173,0.95);
		height: 300px;
		width: 400px;
		z-index: 5;
		position: absolute;
	}
 
	.caption-style-3 .caption-text h1{
		text-transform: uppercase;
		font-size: 18px;
	}
	.caption-style-3 .caption-text{
		z-index: 10;
		color: #fff;
		position: absolute;
		width: 400px;
		height: 300px;
		text-align: center;
		top:20px;
	}
 
 
	/** Nav Menu */
	ul.nav-menu{
		padding: 0px;
		margin: 0px;
		list-style-type: none;
		width: 490px;
		margin: 60px auto;
	}
 
	ul.nav-menu li{
		display: inline;
		margin-right: 10px;
		padding:10px;
		border: 1px solid #ddd;
	}
 
	ul.nav-menu li a{
		color: #eee;
		text-decoration: none;
		text-transform: uppercase;
	}
 
	ul.nav-menu li a:hover, ul.nav-menu li a.active{
		color: #2c3e50;
	} 
	/** content **/
	.content{
		margin-top: 100px;
		margin-left: 100px;
		width: 700px;
	}
	.content h1, .content h2{
		font-family: "Source Sans Pro",sans-serif;
		color: #ecf0f1;
		padding: 0px;
		margin: 0px;
		font-weight: normal;
	}
 
	.content h1{
		font-weight: 900;
		font-size: 64px;
	}
 
	.content h2{
		font-size:26px;
	}
 
	.content p{
		color: #ecf0f1;
		font-family: "Lato";
		line-height: 28px;
		font-size: 15px;
		padding-top: 50px;
	}
 
	p.credit{
		padding-top: 20px;
		font-size: 12px;
	}
 
	p a{
		color: #ecf0f1;
	}
gewandelt in 0.003 Sekunden, benutzt wurde GeSHi 1.0.8.10