Here is a section that I have created, you can view the mockup here.
The section is divided into 3 parts, each taking up around 33.3% of the width and floated. My goal is to make it so that when a specific element, like .col-one in my example, is hovered over, that element will expand to 50% width while the other two elements shrink to 25%.
/* SCSS */
.contact {
background: #414141;
height: 600px;
width: 90%;
margin: 0 auto;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.contact-container {
width: 100%;
height: 100%;
}
.contact-col {
width: calc(100% / 3);
height: 100%;
float: left;
display: inline;
@include transition(all, 0.6s);
&:hover {
background: rgba(248, 220, 93, 0.6);
}
}
.contact-option {
text-align: center;
color: white;
@include vertical-align;
h5 {
font-size: 30px;
text-transform: uppercase;
padding: 0 0 25px 0;
}
}