Flicker

STOP THIS FLICKER PLEASE

by Leo Vlaze

HTML

<!Doctype html>
	<html>
		<head>
    </head>
	<body>

<div style="margin-left:80px;">
</div>
			<div class="content">
				<div class="grid">
					<table>
						<tr>
							
							<td>
							<a href="web/statistics.html">
								<figure class="effect-leo">
								<img src="http://wptest.io/demo/wp-content/uploads/sites/2/2012/12/unicorn-wallpaper.jpg" id="tes" width="100%">
									<figcaption>
										<h2> Our <span>stats </span><h4></h4></h2>
										<p class="description">Click to see our/your leaderboards.</p>
									</figcaption>									
								</figure>
							</a>
							</td>
						</tr>
					</table>
				</div>
				</div>
		</body>
	</html>

CSS

/* SIZEEEEE */
.grid figure {
	position: relative;
	overflow: hidden;
	margin: 10px 1%;
	min-width: 300px;
	max-width: 300px;
	max-height: 300px;
	text-align: center;
	cursor: pointer;
	-webkit-backface-visibility: hidden !important;
	backface-visibility: visible|hidden|initial|inherit;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}


.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.grid figure h2, .grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

/* Individual effects */
/*---------------*/
/***** Zoe *****/
/*---------------*/

figure.effect-leo figcaption {
	top: auto;
	bottom: 0;
	padding: 1em;
	height: 3.75em;
	background: #555;
	color: white;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
	text-shadow: 0px 0px;
}

figure.effect-leo h2 {
	float: left;
		font-family: "Times New Roman";
	
}
figure.effect-leo p.icon-links a {
	float: right;
	color: #3c4a50;
	font-size: 1.4em;
}

figure.effect-leo:hover p.icon-links a:hover,
figure.effect-leo:hover p.icon-links a:focus {
	color: #252d31;
}
figure:hover > #tes {
	filter: blur(6px);
	
	}
#tes {
	transition: .4s;
	-webkit-backface-visibility: hidden !important;
	backface-visibility: visible|hidden|initial|inherit;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
}
figure.effect-leo p.description {
	position: absolute;
	bottom: 4em;
	padding: 2em;
	color: #fff;
	text-transform: none;
	font-size: 90%;
	opacity: 0;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
	-webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
     text-shadow:
    -1px -1px 0 black,
    1px -1px 0...