Desktop diagonal media block using CSS and HTML

Details
View Comments
Desktop diagonal media block using CSS and HTML

Desktop diagonal media block developed using html and css. Demo and download are available.

Demo Download

Author Chmood
Hits
Created SEPTEMBER 15, 2018
License Open
Compatible browsers Chrome, Firefox, Safari

HTML Snippet

<section class="tiles">
	<h1><span>CSS</span> triangles FTW</h1>
	<div class="subtitle">Hover the items below - desktop only</div>
	
	<article class="tile" tabindex="0">
		<div class="tile__img">
			<div class="img-wrapper">
				<img src="https://picsum.photos/319?random" alt="">
			</div>
		</div>
		<div class="tile__content">
			<div class="tile__metas">
				<span class="meta">#1 meta</span>
				<span class="meta">#2 meta</span>
				<span class="meta">#3 meta</span>
			</div>
			<h3 class="tile__title">The tile title</h3>
			<div class="tile__body">
				Animi eligendi nisi quibusdam soluta ipsam accusantium officiis id ex eveniet dolores, omnis nobis!
			</div>
			<a href="#" class="tile__btn">Get in touch!</a>
		</div>
	</article>
	
	<article class="tile" tabindex="0">
		<div class="tile__img">
			<div class="img-wrapper">
				<img src="https://picsum.photos/320?random" alt="">
			</div>
		</div>
		<div class="tile__content">
			<div class="tile__metas">
				<span class="meta">#1 meta</span>
				<span class="meta">#2 meta</span>
			</div>
			<h3 class="tile__title">Very very long long tile title</h3>
			<div class="tile__body">
				Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat doloremque eius omnis voluptatibus, vero ipsa dolor?
			</div>
			<a href="#" class="tile__btn">Wanna try?</a>
		</div>
	</article>	
	
	<article class="tile" tabindex="0">
		<div class="tile__img">
			<div class="img-wrapper">
				<img src="https://picsum.photos/321?random" alt="">
			</div>
		</div>
		<div class="tile__content">
			<div class="tile__metas">
				<span class="meta">#1 meta</span>
				<span class="meta">#2 meta</span>
				<span class="meta">#3 meta</span>
			</div>
			<h3 class="tile__title">Yet another tile title</h3>
			<div class="tile__body">
				Animi eligendi nisi quibusdam soluta ipsam accusantium officiis id ex eveniet dolores, omnis nobis!
			</div>
			<a href="#" class="tile__btn">Learn more&hellip;</a>
		</div>
	</article>
	
</section>

CSS Code

$gutter: 2.4rem;

$font-size-base: 1.6rem;
$font-size-big: 2rem;
$font-size-small: 1.4rem;

$tile-img-size: 9rem;
$tile-img-border: $gutter / 4;
$tile-img-rotation: 45deg;

$tile-color-primary: #ee1122;
$tile-color-meta: #111;
$tile-color-button: #111;
$body-color: $tile-color-primary;

$square-diagonal-ratio: 1.414213562; // sqrt(2)

$ease-bump: cubic-bezier(0.99, -0.2, 0.01, 1.2);

// Computed vars
$tile-img-size-total: $tile-img-size * $square-diagonal-ratio;

$tile-metas-height: $tile-img-size-total / 6;
$tile-body-height: $tile-img-size-total / 2;
$tile-button-height: $tile-img-size-total / 4;

$tile-title-height: (
	$tile-img-size-total / 2 - 
	$tile-metas-height -
	2 * $gutter / 4
);

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,400i,600,600i,900');

@mixin triangle($orientation, $color, $width, $height: $width / 2) {
	width: 0;
	height: 0;
	border-style: solid;
	
	@if $orientation == 'left' {
		border-width: $width / 2 $height $width / 2 0;
		border-color: transparent $color transparent transparent;

	} @else if $orientation == 'right' {
		border-width: $width / 2 0 $width / 2 $height;
		border-color: transparent transparent transparent $color;

	} @else if $orientation == 'top' {
		border-width: 0 $width / 2 $height $width / 2;
		border-color: transparent transparent $color transparent;

	} @else if $orientation == 'bottom' {
		border-width: $height $width / 2 0 $width / 2;
		border-color: $color transparent transparent transparent;

	} @else if $orientation == 'top-left' {
		border-width: $height * 2 $width 0 0;
		border-color: $color transparent transparent transparent;

	} @else if $orientation == 'top-right' {
		border-width: 0 $width $height * 2 0;
		border-color: transparent $color transparent transparent;

	} @else if $orientation == 'bottom-left' {
		border-width: $height * 2 0 0 $width;
		border-color: transparent transparent transparent $color;

	} @else if $orientation == 'bottom-right' {
		border-width: 0 0 $height * 2 $width;
		border-color: transparent transparent $color transparent;

	} @else {
		@error '@mixin triangle(): unknown $orientation `#{$orientation}`'
	}
}

html {
	font-size: 62.5%;
}

body {
	font-size: 1.6rem;
	font-family: 'Raleway', sans-serif;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: $body-color;
}

.tiles,
// .tile__metas,
.tile__title,
.tile__body,
.meta,
.tile__btn {
	position: relative;
	
	&::before,
	&::after {
		position: absolute;
		top: 0;
		content: "";
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
	}
}

.tiles {
	background: white;
	padding-bottom: $gutter;
	
	&::before {
		right: 0;
		@include triangle('top-right', $body-color, $gutter * 4);
	}

	&::after {
		left: 0;
		top: auto;
		bottom: 0;
		@include triangle('bottom-left', $body-color, $gutter * 4);
	}
}

.tile {
	margin: 0 $gutter;
	padding: $gutter / 2;
	display: flex;
	font-size: $font-size-base;
	max-width: 50vw;
	// max-height: $tile-img-size-total;
	cursor: pointer;
	min-width: 50rem;
	position: relative;
	overflow: hidden;
	
	&::before {
		border: none;
		display: block;
		content: "";
		width: 30rem;
		height: 30rem;
		position: absolute;
		top: $tile-img-size-total / 2;
		left: $tile-img-size-total / 2;
		background-color: #ddd;
		opacity: 0;
		transform: translate3d(-50%, -50%, 0) rotateZ(0) scale(0);
		transition: all 0.5s $ease-bump;
		transition-delay: 0.25s;
	}
	
	&:hover, &:focus {
		&::before {
			opacity: 1;
			transform: translate3d(-50%, -50%, 0) rotateZ($tile-img-rotation) scale(1);
		}
	}
}

.tile__img {
	flex-basis: $tile-img-size-total;
	min-width: $tile-img-size-total;
	max-height: $tile-img-size-total;
	display: flex;
	justify-content: center;
	align-items: center;
	
	> .img-wrapper {
		width: $tile-img-size / 2;
		height: $tile-img-size / 2;
		border: $tile-img-border solid $tile-color-primary;
		transform: rotateZ($tile-img-rotation);
		overflow: hidden;
		position: relative;
		transition: all 0.25s $ease-bump;
		z-index: 10;
		
		.tile:hover &, .tile:focus & {
			width: $tile-img-size;
			height: $tile-img-size;
		}
		
		> img {
			position: absolute;
			top: 50%;
			left: 50%;
			display: block;
			max-width: $tile-img-size-total;
			transform-origin: 50% 50%;
			transform: translate3d(-50%, -50%, 0) rotateZ(-$tile-img-rotation) scale(0.85);
			transition: all 0.25s $ease-bump;
			
			.tile:hover & {
				transform: translate3d(-50%, -50%, 0) rotateZ(-$tile-img-rotation) scale(1);
			}
		}
	}
}

.tile__content {
	flex-grow: 1;
}

// .tile__metas,
.tile__title,
.tile__body,
.tile__btn {
	position: relative;
	background-color: $tile-color-primary;
	color: white;
	margin: 0;
	padding-left: $gutter / 4;
	padding-right: $gutter / 4;
}

.tile__metas {
	height: $tile-metas-height;
	line-height: $tile-metas-height;
	font-size: $font-size-small;
	transform: translateX(
		$gutter * $square-diagonal-ratio / 4 + 
		$tile-metas-height + 
		$tile-img-size-total / -2
	);
	margin-bottom: $gutter / 4;
	
	.meta {
		position: relative;
		display: inline-block;
		background: $tile-color-meta;
		padding-left: $gutter / 8;
		padding-right: $gutter / 8;
		margin-right: $tile-metas-height + $gutter / 8;
		color: white;
		transform: translate3d($tile-metas-height, $tile-metas-height, 0);
		opacity: 0;
		transition: all 0.25s $ease-bump;
		transition-delay: 0.25s;
		
		&:nth-child(2) { transition-delay: 0.25s + 0.125s; }
		&:nth-child(3) { transition-delay: 0.25s + 0.125s * 2; }
		
		.tile:hover &, .tile:focus & {
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}

		&::before {
			left: -$tile-metas-height;
			@include triangle('top-right', $tile-color-meta, $tile-metas-height);
		}

		&::after {
			right: -$tile-metas-height;
			@include triangle('bottom-left', $tile-color-meta, $tile-metas-height);
		}
	}
}

.tile__title {
	display: inline-block;
	height: $tile-title-height;
	line-height: $tile-title-height;
	font-size: $font-size-big;
	font-weight: 600;
	margin-right: $tile-title-height;
	transform: translateX(-$tile-img-size-total / 4);
	transition: all 0.25s $ease-bump;
	margin-left: $gutter / $square-diagonal-ratio / 4;
		
	.tile:hover &, .tile:focus & {
		transform: translateX(0);		
	}
	
	&::before {
		left: -$tile-title-height;
		@include triangle('top-right', $tile-color-primary, $tile-title-height);
	}
	
	&::after {
		right: -$tile-title-height;
		@include triangle('bottom-left', $tile-color-primary, $tile-title-height);
	}
}

.tile__body {
	height: $tile-body-height;
	margin-top: $gutter / 4;
	margin-bottom: $gutter / 4;
	margin-left: $gutter * $square-diagonal-ratio / 4;
	margin-right: $tile-body-height;
	padding-top: $gutter / 4;
	padding-bottom: $gutter / 4;
	font-size: $font-size-small;
	font-style: italic;
	opacity: 0;
	transform: translate3d(-$tile-body-height, -$tile-body-height, 0);
	transition: all 0.25s $ease-bump;
	transition-delay: 0.25s;
	
	.tile:hover &, .tile:focus & {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	
	&::before {
		left: - ($tile-body-height / 2);
		@include triangle('left', $tile-color-primary, $tile-body-height);
	}
	
	&::after {
		right: -$tile-body-height;
		@include triangle('top-left', $tile-color-primary, $tile-body-height);
	}
}

.tile__btn {
	display: inline-block;
	height: $tile-button-height;
	margin-left: $tile-button-height + 2 * $gutter / 4;
	line-height: $tile-button-height;
	background: $tile-color-button;
	text-decoration: none;
	font-size: $font-size-small;
	font-style: italic;
	font-weight: 600;
	text-transform: uppercase;
	transform: translate3d(-$tile-button-height * 2 - $gutter / 8, -$tile-body-height - $gutter / 4, 0);
	transition: all 0.25s $ease-bump;
	transition-delay: 0.125s;

	.tile:hover &, .tile:focus & {
		transform: translate3d(0, 0, 0);
	}

	&::before {
		left: -$tile-button-height;
		@include triangle('bottom-right', $tile-color-button, $tile-button-height);
		transition: all 0.25s;
		transition-delay: 0.125s;
		
		.tile:hover &, .tile:focus & {
			@include triangle('top-right', $tile-color-button, $tile-button-height);
		}
	}
	&::after {
		right: -$tile-button-height;
		@include triangle('top-left', $tile-color-button, $tile-button-height);
	}

	&:hover, &:focus {
	}
}

h1 {
	margin: $gutter * 2;
	margin-bottom: $gutter / 2;
	color: #888;
	font-weight: 300;
	
	> span {
		font-weight: 900;
		color: $tile-color-primary;
	}
}

.subtitle {
	margin: $gutter * 2;
	margin-top: 0;
	font-style: italic;
	color: #444;
}

*, *::before, *::after {
	box-sizing: border-box;
}

Preview

Desktop diagonal media block preview

Advertisement

Google Matched Content...