ещё hover

by avgustre

HTML

<html lang="en" class="no-js">

	<body>
		<div class="container">
			
<div class="grid">
					
				<figure class="effect-1">
					
					<figcaption>
						<h2>#<span>f69679</span></h2>
						<p>......</p>
						<a href="#">View more</a>
					</figcaption>			
				</figure>
				<figure class="effect-2">
					
					<figcaption>
						<h2>#<span>c4df9b</span></h2>
						<span class="icon-heart"></span>
						<span class="icon-eye"></span>
						<span class="icon-paper-clip"></span>
						<a href="#">View more</a>
					</figcaption>			
				</figure>
				<figure class="effect-3">
					
					<figcaption>
						<h2>#<span>a186be</span></h2>
						<p>......</p>
						<a href="#">View more</a>
					</figcaption>			
				</figure>
				
				<figure class="effect-4">
						<figcaption>
						<h2>#<span>39b54a</span></h2>
						<p>......</p>
						<a href="#">View more</a>
					</figcaption>			
				</figure>
				<figure class="effect-5">
					
					<figcaption>
						<h2>#<span>fff200</span></h2>
						<p>......</p>
						<a href="#">View more</a>
					</figcaption>			
				</figure>
				<figure class="effect-6">
					
					<figcaption>
						<h2>#<span>790000</span></h2>
						<p>......</p>
						<a href="#">View more</a>
					</figcaption>			
				</figure>
				
			</div>
			
		</div><!-- /container -->
		<script>
			// Demo 
			[].slice.call( document.querySelectorAll('a[href="#"') ).forEach( function(el) {
				el.addEventListener( 'click', function(ev) { ev.preventDefault(); } );
			} );
		</script>
	</body>
</html>

CSS

*, *:after, *:before { border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }

body {
	background: #999;
	color: #000;
	font-weight: 400;
	font-size: 1em;
	font-family: 'Raleway', Arial, sans-serif;
}

a {
	color: #4f7f90;
	text-decoration: none;
	outline: none;
}

a:hover, a:focus {
	color: #39545e;
}

section {
	padding: 1em;
	text-align: center;
}


/*-- demos --*/
.related {
	padding: 6em 1em;
	font-size: 120%;
}

.related > a {
	border: 1px solid #4f7f90;
	display: inline-block;
	text-align: center;
	margin: 20px 10px;
	padding: 25px;
}

.related a:hover {
	border-color: #39545e;
}

.related a img {
	max-width: 100%;
	opacity: 0.8;
}

.related a:hover img,
.related a:active img {
	opacity: 1;
}

.related a h3 {
	margin: 0;
	padding: 0.5em 0 0.3em;
	max-width: 300px;
	text-align: left;
}


.grid {
	overflow: hidden;
	margin: 0;
	padding: 3em 0 0 0;
	width: 100%;
	list-style: none;
	text-align: center;
}

/* Styles */
.grid figure {
	position: relative;
	z-index: 1;
	display: inline-block;
	overflow: hidden;
	margin: -0.135em;
	width: 33.333%;
	height: 400px;
	background: #000;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	opacity: 0.8;
}

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

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

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


.grid figure a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

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

.grid figure p {
	letter-spacing:...