Desktop diagonal media block developed using html and css. Demo and download are available.
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
Leave a Reply