Original: https://codepen.io/jondaiello/details/akZxKz/
This is a modified quick demo showing how you can use flex-grow and transitions to animate a block growing larger in a grid in both directions.
A Pen by Zane Hannan AU on CodePen.
<section class="c-hero-flex"> | |
<a class="c-hero-flex__item"> | |
<h2 class="c-hero-flex__title">Title Name Here</h2> | |
</a> | |
<a class="c-hero-flex__item"> | |
<h2 class="c-hero-flex__title">Another Title Name Here</h2> | |
</a> | |
<a class="c-hero-flex__item"> | |
<h2 class="c-hero-flex__title">Last Title Name Here</h2> | |
</a> | |
</section> |
Original: https://codepen.io/jondaiello/details/akZxKz/
This is a modified quick demo showing how you can use flex-grow and transitions to animate a block growing larger in a grid in both directions.
A Pen by Zane Hannan AU on CodePen.
// none needed |
body { | |
font-family: 'Rubik', 'Segoe UI', 'San Francisco', 'Calibri', Arial, sans-serif; | |
margin: 0; | |
} | |
.c-hero-flex { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
height: 100vh; | |
width: 100vw; | |
@media (max-width: 960px) | |
{ | |
flex-flow: column nowrap; | |
&__item { | |
width: 100%; | |
} | |
} | |
&__item { | |
flex-grow: 1; | |
background: #ccc; | |
// height: 100%; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
background-size: cover; | |
box-shadow: inset 0 0 0 100vmax rgba(0,0,0,.5); | |
transition: .2s all; | |
cursor: pointer; | |
@media (min-width: 961px) | |
{ | |
height: 100%; | |
} | |
&:hover { | |
flex-grow: 2; | |
box-shadow: inset 0 0 0 100vmax rgba(175,0,100,.7); | |
} | |
&:nth-child(1) { | |
background: #222 url(https://images.unsplash.com/photo-1417577097439-425fb7dec05e?dpr=1&auto=format&crop=entropy&fit=crop&w=1000&h=1000&q=80&cs=tinysrgb) no-repeat center center; | |
} | |
&:nth-child(2) { | |
background: #222 url(https://images.unsplash.com/photo-1424460421773-58b49adfc68a?dpr=1&auto=format&crop=entropy&fit=crop&w=1000&h=1000&q=80&cs=tinysrgb) no-repeat center center; | |
} | |
&:nth-child(3) { | |
background: #222 url(https://images.unsplash.com/photo-1442876906995-6761040d1f0b?dpr=1&auto=format&crop=entropy&fit=crop&w=1000&h=1000&q=80&cs=tinysrgb) no-repeat center center; | |
} | |
} | |
&__title { | |
text-transform: uppercase; | |
letter-spacing: .075em; | |
color: #fff; | |
transition: .2s all; | |
} | |
} |