-
-
Save eksana/9be2b818dbd0658abb0b3c296b80cf55 to your computer and use it in GitHub Desktop.
hover_grid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Hover around the boxes below</h1> | |
<div class="container"> | |
<div class="row"> | |
<div class="col"> | |
<div class="photo-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=266)"></div> | |
<h2>Image 266 </h2> | |
<div class="slide"> | |
<p>Doloremque quisquam molestias, est laudantium vero aliquid dolorum inventore atque sint perferendis qui dolor voluptas consequuntur non.</p> | |
</div> | |
</div> | |
<div class="col"> | |
<div class="photo-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=187)"></div> | |
<h2>Image 187 </h2> | |
<div class="slide"> | |
<p>Facere illo pariatur necessitatibus fugit quo impedit, quae, corporis placeat recusandae dolor ipsa nobis!</p> | |
</div> | |
</div> | |
<div class="col"> | |
<div class="photo-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=204)"></div> | |
<h2>Image 204 </h2> | |
<div class="slide"> | |
<p>Quam molestiae ipsa sapiente mollitia, nobis.</p> | |
</div> | |
</div> | |
<div class="col"> | |
<div class="photo-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=282)"></div> | |
<h2>Image 282 </h2> | |
<div class="slide"> | |
<p>Autem possimus perspiciatis, eaque quos repudiandae modi labore sed repellat dolorum magnam praesentium expedita esse tempore saepe nulla.</p> | |
</div> | |
</div> | |
<div class="col"> | |
<div class="photo-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=142)"></div> | |
<h2>Image 142 </h2> | |
<div class="slide"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> | |
</div> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="col"> | |
<div class="photo-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=156)"></div> | |
<h2>Image 156 </h2> | |
<div class="slide"> | |
<p>Facere illo pariatur necessitatibus fugit quo impedit, quae, corporis placeat recusandae dolor ipsa nobis!</p> | |
</div> | |
</div> | |
<div class="col"> | |
<div class="photo-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=238)"></div> | |
<h2>Image 238 </h2> | |
<div class="slide"> | |
<p>Quam molestiae ipsa sapiente mollitia, nobis.</p> | |
</div> | |
</div> | |
<div class="col"> | |
<div class="photo-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=134)"></div> | |
<h2>Image 134 </h2> | |
<div class="slide"> | |
<p>Autem possimus perspiciatis, eaque quos repudiandae modi labore sed repellat dolorum magnam praesentium expedita esse tempore saepe nulla.</p> | |
</div> | |
</div> | |
<div class="col"> | |
<div class="photo-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=240)"></div> | |
<h2>Image 240 </h2> | |
<div class="slide"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> | |
</div> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="col"> | |
<div class="photo-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=296)"></div> | |
<h2>Image 296 </h2> | |
<div class="slide"> | |
<p>Doloremque quisquam molestias, est laudantium vero aliquid dolorum inventore atque sint perferendis qui dolor voluptas consequuntur non.</p> | |
</div> | |
</div> | |
<div class="col"> | |
<div class="photo-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=11)"></div> | |
<h2>Image 11 </h2> | |
<div class="slide"> | |
<p>Facere illo pariatur necessitatibus fugit quo impedit, quae, corporis placeat recusandae dolor ipsa nobis!</p> | |
</div> | |
</div> | |
<div class="col"> | |
<div class="photo-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=9)"></div> | |
<h2>Image 9 </h2> | |
<div class="slide"> | |
<p>Quam molestiae ipsa sapiente mollitia, nobis.</p> | |
</div> | |
</div> | |
<div class="col"> | |
<div class="photo-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=118)"></div> | |
<h2>Image 118 </h2> | |
<div class="slide"> | |
<p>Autem possimus perspiciatis, eaque quos repudiandae modi labore sed repellat dolorum magnam praesentium expedita esse tempore saepe nulla.</p> | |
</div> | |
</div> | |
<div class="col"> | |
<div class="photo-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=18)"></div> | |
<h2>Image 18 </h2> | |
<div class="slide"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> | |
</div> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="col"> | |
<div class="photo-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=189)"></div> | |
<h2>Image 189 </h2> | |
<div class="slide"> | |
<p>Veritatis eos similique eveniet tempora.</p> | |
</div> | |
</div> | |
<div class="col"> | |
<div class="photo-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=52)"></div> | |
<h2>Image 52 </h2> | |
<div class="slide"> | |
<p>Doloremque quisquam molestias, est laudantium vero aliquid dolorum inventore atque sint perferendis qui dolor voluptas consequuntur non.</p> | |
</div> | |
</div> | |
<div class="col"> | |
<div class="photo-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=130)"></div> | |
<h2>Image 130 </h2> | |
<div class="slide"> | |
<p>Facere illo pariatur necessitatibus fugit quo impedit, quae, corporis placeat recusandae dolor ipsa nobis!</p> | |
</div> | |
</div> | |
<div class="col"> | |
<div class="photo-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=241)"></div> | |
<h2>Image 241 </h2> | |
<div class="slide"> | |
<p>Quam molestiae ipsa sapiente mollitia, nobis.</p> | |
</div> | |
</div> | |
<div class="col"> | |
<div class="photo-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=230)"></div> | |
<h2>Image 230 </h2> | |
<div class="slide"> | |
<p>Autem possimus perspiciatis, eaque quos repudiandae modi labore sed repellat dolorum magnam praesentium expedita esse tempore saepe nulla.</p> | |
</div> | |
</div> | |
<div class="col"> | |
<div class="photo-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=292)"></div> | |
<h2>Image 292 </h2> | |
<div class="slide"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
/* The magic */ | |
.col { | |
// Prepare for absolute slide | |
overflow: hidden; | |
position: relative; | |
} | |
.slide { | |
// Position inside column | |
position: absolute; | |
top: 0; right: 0; bottom: 0; left: 0; | |
/* | |
Visibility delay gives the previously hovered element time to slide out before disappearing. | |
Remove the `visibility` transition to slide in current element without sliding out previous element | |
*/ | |
$speed: 0.275s; | |
transition: all $speed ease-in-out, visibility 0s $speed; | |
visibility: hidden; | |
will-change: transform; | |
// Slides start below their columns, giving upward motion on hover | |
transform: translateY(100%); | |
} | |
.row:hover { | |
// Next row, slides are above their columns, giving downward motion on hover | |
& ~ .row .slide { transform: translateY(-100%); } | |
// Current row, slides to the right of their columns, giving left motion on hover | |
.slide { transform: translateX(100%); } | |
// Current row, next slides, slides to the left of their columns, giving right motion on hover | |
& .col:hover ~ .col .slide { transform: translateX(-100%); } | |
// Current slide | |
.col:hover .slide { | |
transform: none; | |
visibility: visible; | |
transition-delay: 0s; | |
} | |
} | |
/* Pen styling */ | |
// This a mess, ignore | |
* { box-sizing: border-box; } | |
body { | |
background: #fefefe; | |
color: #333; | |
font: 14px /1.5 "Fira Sans", sans-serif; | |
} | |
h1 { | |
font-size: 2.5rem; | |
font-weight: 300; | |
margin: 1.5em 0.5rem 1em; | |
text-align: center; | |
} | |
.container { | |
margin: 0 auto; | |
padding: 2rem; | |
max-width: 1200px; | |
} | |
.row { | |
display: flex; | |
} | |
.col { | |
color: #fff; | |
flex: 1 1 auto; | |
min-height: 260px; | |
position: relative; | |
h2 { | |
font-weight: 300; | |
font-size: (14 * 1.33333) / 14 * 1rem; | |
line-height: 1.25; | |
margin: 0; | |
position: absolute; | |
bottom: 1.5rem; right: 1.5rem; | |
z-index: 0; | |
} | |
} | |
// Some size difference for variety | |
.col:nth-child(2) { min-width: 20%; } | |
.col:nth-child(4) { min-width: 33%; } | |
.col:nth-child(3) + .col:nth-child(3) { min-width: 50%; } | |
// Photo is in its own container, so we can zoom it | |
.photo-container { | |
background: #0f0523 50% 50% / cover; | |
position: absolute; | |
top: 0; right: 0; bottom: 0; left: 0; | |
transition: 1s; | |
transform-origin: bottom right; | |
&::before { | |
background: linear-gradient(transparent, rgba(#431133, 0.5), #000320); | |
content: ''; | |
position: absolute; | |
top: 0; right: 0; bottom: 0; left: 0; | |
} | |
.col:hover & { | |
transform: scale(1.25); | |
} | |
} | |
// Basic slide styles | |
.slide { | |
background: rgba(#190115, 0.8); | |
padding: 0 1.5rem; | |
} | |
https://codepen.io/giana/pen/YZWjQy |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://codepen.io/giana/pen/YZWjQy