Some Articles

index.html

<article>
	<a href="#">
		<div class="article-image">
			<img src="https://images.unsplash.com/photo-1467825487722-2a7c4cd62e75?dpr=1&auto=format&fit=crop&w=800&h=600&q=80&cs=tinysrgb&crop=" />
		</div>
		<div class="article-caption">
			<p class="article-date">13.02.17</p>
			<h2>An Introduction to Strawberries</h2>
			<p class="btn btn-brand article-readmore"><span class="btn btn-brand">Read more</span></p>
		</div>
	</a>
</article>

<article>
	<a href="#">
		<div class="article-image">
			<img src="https://images.unsplash.com/photo-1467825487722-2a7c4cd62e75?dpr=1&auto=format&fit=crop&w=800&h=600&q=80&cs=tinysrgb&crop=" />
		</div>
		<div class="article-caption">
			<p class="article-date">13.02.17</p>
			<h2>An Introduction to Strawberries</h2>
			<p class="article-readmore"><span class="btn btn-brand">Read more</span></p>
		</div>
	</a>
</article>
<article>
	<a href="#">
		<div class="article-image">
			<img src="https://images.unsplash.com/photo-1467825487722-2a7c4cd62e75?dpr=1&auto=format&fit=crop&w=800&h=600&q=80&cs=tinysrgb&crop=" />
		</div>
		<div class="article-caption">
			<p class="article-date">13.02.17</p>
			<h2>An Introduction to Strawberries</h2>
			<p class="btn btn-brand article-readmore"><span class="btn btn-brand">Read more</span></p>
		</div>
	</a>
</article>

<article>
	<a href="#">
		<div class="article-image">
			<img src="https://images.unsplash.com/photo-1467825487722-2a7c4cd62e75?dpr=1&auto=format&fit=crop&w=800&h=600&q=80&cs=tinysrgb&crop=" />
		</div>
		<div class="article-caption">
			<p class="article-date">13.02.17</p>
			<h2>An Introduction to Strawberries</h2>
			<p class="article-readmore"><span class="btn btn-brand">Read more</span></p>
		</div>
	</a>
</article>
<article>
	<a href="#">
		<div class="article-image">
			<img src="https://images.unsplash.com/photo-1467825487722-2a7c4cd62e75?dpr=1&auto=format&fit=crop&w=800&h=600&q=80&cs=tinysrgb&crop=" />
		</div>
		<div class="article-caption">
			<p class="article-date">13.02.17</p>
			<h2>An Introduction to Strawberries</h2>
			<p class="btn btn-brand article-readmore"><span class="btn btn-brand">Read more</span></p>
		</div>
	</a>
</article>

<article>
	<a href="#">
		<div class="article-image">
			<img src="https://images.unsplash.com/photo-1467825487722-2a7c4cd62e75?dpr=1&auto=format&fit=crop&w=800&h=600&q=80&cs=tinysrgb&crop=" />
		</div>
		<div class="article-caption">
			<p class="article-date">13.02.17</p>
			<h2>An Introduction to Strawberries</h2>
			<p class="article-readmore"><span class="btn btn-brand">Read more</span></p>
		</div>
	</a>
</article>

some-articles.markdown

Some Articles

Some alternating layout articles for a blog landing page. A bold hover using mix blend mode and grayscale filter for the image.

A Pen by Teegan Lincoln on CodePen.

License.

style.scss

$brand-primary: #f64747;

$screen-sm-min: 768px;

body {
	padding:30px;
}

article {
	margin-bottom:30px;
	margin-left:auto;
	margin-right:auto;
	width:100%;
	max-width:800px;
	
	&:nth-child(even) {
		> a {
			flex-direction:column;

			@media (min-width: $screen-sm-min) {
				flex-direction:row-reverse;
			}
		}
		
		.article-image {
			&:after {
				bottom:-10px;
				right:-10px;
				top:auto;
				left:auto;
				width:calc(100% - 4px);
				height:calc(100% - 4px);
			}
		}
		
		.article-caption .article-readmore {
			//text-align:right;
		}
	}
	 
	> a {
		display:flex;
		text-decoration:none;
		color:#000;
		transition:0.3s ease-in-out all;
		flex-direction:column;

		@media (min-width: $screen-sm-min) {
			flex-direction:row;
		}

		&:hover, &:focus {
			background: $brand-primary;
			color:#fff;

			.article-image {
				background: $brand-primary;

				img {
					filter:grayscale(100%);
				}
			}

			.article-caption {
				.article-readmore {
					
					.btn-brand {
						border-color:#fff;
					}
				}
			}
		}
	}
	
	.article-image {
		background:#fff;
		transition:0.3s ease-in-out all;
		position:relative;
		
		&:after {
			position:absolute;
			border: 2px solid #000;
			content:"";
			top:-10px;
			left:-10px;
			width:calc(100% - 4px);
			height:calc(100% - 4px);
		}
	
		@media (min-width: $screen-sm-min) {
			width:45%;
		}
		
		img {
			width:100%;
			height:auto;
			filter:grayscale(0);
			display:block;
			mix-blend-mode: multiply;
			transition:0.3s ease-in-out filter;
		}
	}
	
	.article-caption {
		flex-grow:1;
		padding:30px;
		
		@media (min-width: $screen-sm-min) {
			align-self: center;
		}
		
		.article-date {
			margin:0;
			letter-spacing:0.2em;
			font-size:0.75em;
		}
		
		h2 {
			margin:0;
			margin-bottom:15px;
			font-weight:normal;
		}
		
		.article-readmore {
			margin:0;
			
			.btn-brand {
				display:inline-block;
				text-transform:uppercase;
				font-size:0.75em;
				letter-spacing:0.2em;
				font-weight:bold;
				line-height:1.1em;
				position:relative;
				border:2px solid #000;
				color:#fff;
				padding: 10px 12px;
				transition:0.3s ease-in-out border;
				
				&:after {
					content:"";
					position:absolute;
					left:-5px;
					top:-5px;
					width:calc(100% + 2px);
					height:calc(100% + 2px);
					background: $brand-primary;
					z-index:-1;
				}
			}
		}
	}
}