Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.html
Created Aug 31, 2016

Embed
What would you like to do?
(Responsive Fork) Flexible Hover Blocks
<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>
// 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.