<div id="gridslider"> <a class="griditem_A" href="#"> <h1>TEAM NEWS</h1> <p> Need for News?</p> </a> <a class="griditem_B" href="#"><h1>SPONSORS</h1> <p> The People making things possible.</p></a> <a class="griditem_C" href="#"><h1>THE TEAM</h1> <p> Our Dedicated People</p></a> <a class="griditem_D" href="#"><h1>EVENTS</h1> <p> The upcoming Team spectacles.</p></a> </div>
#gridslider { line-height: 0; padding: 0 auto; margin: 0 auto; width: 100%; height: auto; } #gridslider a { line-height: 2em; position: relative; transition: all 1s; width: 25%; height: 75vh; float: left; background-size: cover; background-position: center center; background-repeat: no-repeat; text-decoration: none; margin: 0; padding: 0; } #gridslider a h1 { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transition: all 1s; width: auto; height: 25%; margin: 0; padding: 0; text-align: center; vertical-align: middle; font-family: "Trebuchet MS", Helvetica, sans-serif; font-size: 28px; font-weight: bolder; color: #333; } #gridslider a p { position: absolute; bottom: 0; left: 0; right: 0; opacity: 0; transition: all 1s; width: auto; height: 25%; margin: 0; padding: 0; text-align: center; font-family: "Trebuchet MS", Helvetica, sans-serif; font-size: 20px; font-weight: bolder; color: #fff; background: rgba(128, 128, 128, 0.75); } #gridslider a:hover h1, #gridslider a:hover p { transition: all 1s; opacity: 1; } .griditem_A { background: url(http://teamcontego.co.za/wp-content/uploads/2015/10/Stairs.jpg); } .griditem_B { background: url(http://teamcontego.co.za/wp-content/uploads/2015/07/IMG_9877.jpg); } .griditem_C { background: url(http://teamcontego.co.za/wp-content/uploads/2015/04/Chopper.jpeg); } .griditem_D { background: url(http://teamcontego.co.za/wp-content/uploads/2015/04/Sick-Pic.jpg); } #gridslider a p.filler { height: 25%; width: auto; padding: 0; margin: 0; background: rgba(0, 0, 0, 0); } @media screen and (max-width: 860px) { #gridslider a { transition: all 1s; width: 50%; height: 50vh; float: left; background-size: cover; background-position: center center; background-repeat: no-repeat; text-decoration: none; margin: 0; padding: 0; } }