<div class="page-container"> <div class="flex-container"> <div class="country netherlands"><div>Netherlands</div></div> <div class="country belgium"><div>Belgium</div></div> <!-- <div class="country france"><div>France</div></div> <div class="country germany"><div>Germany</div></div> <div class="country england"><div>England</div></div>--> </div></div>xxxxxxxxxx bg($url, $pos: center) &:after background-image: url($url) background-position: $posdiv box-sizing: border-box html, body, .page-container height: 100% overflow: hidden .page-container transition: padding .2s ease-in padding: 80px &.opened padding: 0 .flex-container .country:not(.active) opacity: 0 flex: 0 div opacity: 0 .active:after filter: grayscale(0%) !important .flex-container display: flex height: 100% all and (max-width: 900px) flex-direction: column .country position: relative flex-grow: 1 flex: 1 transition: .5s ease-in-out cursor: pointer font-family: 'Bree Serif', serif text-align: center color: #fff font-size: 22px text-shadow: 0 0 3px #000 div position: absolute width: 100% z-index: 10 top: 50% text-align: center transition: .1s transform: translateY(-50%) filter: none &:after content: " " position: absolute top: 0 left: 0 right: 0 bottom: 0 background-size: cover transition: .5s ease-in-out filter: grayscale(100%) &:hover flex-grow: 6 &:after filter: grayscale(0%) all and (max-width: 900px) height: auto .netherlands bg('http://cdn.jsdm.com/2/Netherlands.png').belgium bg('http://cdn.jsdm.com/2/belgium-307_3.jpg').france bg('http://cdn.jsdm.com/2/paris-france-contemporary-french-studies-studying-abroad-seine-30.jpg') .germany bg('http://cdn.jsdm.com/2/neuschwanstein-castle-tour-germany-vacation.jpg') .england bg('http://cdn.jsdm.com/2/interesting-facts-about-england-1024x640.jpg') $(".country").click(function() { $(this).toggleClass("active"); $(".page-container").toggleClass("opened");});