Desktop diagonal media block using CSS and HTML
Desktop diagonal media block developed using html and css. Demo and download are available.
| 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…</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
- « Previous
Image Slider with clip-path animation - Next »
Signup Form shows progressive disclosure and micro-interaction
Advertisement