<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="flex-container"> <div class="items"> <img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIsnZBBXdhpf1_qCVu08sQh95unQ65UTabUs5QoLivkAcaj7PVFA" alt="" /> <img class="image" src="http://netflixlife.com/files/2015/05/inglourious-basterds-.jpg" alt="" /> <img class="image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRjyD_W97_8VCTAqkGE1NX56S8d5783fKhT_-Q9wpDXR7HVsOjODQ" alt="" /> <img class="image" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTB83A4eeAEgcHIH0WBRcEcYoYWCRtbZ9rId1ZZHrLv6OoYoRIC4A" alt="" /> <img class="image" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS7_0toJHp2ECSTtR2LxUOK5r9MMnwJTIG0VcKquihFQmNT411UJw" alt="" /> <img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQx5ZGvxU1Kw3dgjV-Vxi_u4DtoUy-qtn1bcmbeNbjBPnqLvxzqug" alt="" /> <img class="image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRglxVWeeh8xfNIRM6nN6cDoaRfpSx8158MWzb7n2e9vnJKq_P6" alt="" /> <img class="image" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQlGi1Z9Muxvxz2WyRaAfKbmVYCn3nH0vvaw_LU5pyvfMxVAmNB" alt="" /> <img class="image" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT3qP9OlkP6TaWRtO-RAj7J3JjFM9a8iJBtEcPWnXLbjXlWZrpB" alt="" /> <img class="image" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTJAyk3csTXu1Oe7el5m2NnlKHxxXuq1GKCIJuBecpUMv75qnWpVg" alt="" /> <img class="image" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTQFSuckpbQWSw1JYryscwhYXt9L-PYN6sxl2Jds3MYe3HGwOgZ" alt="" /> <img class="image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS-MSs0i-X3IwGu8gkgt-L5iUJe3XDY2lnBfS7hccIu_svK86e1" alt="" /> <img class="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS3mdPQMucEN9P6L7xDfxZo_ARDmNQWo4L95OwXEE_xf7mcfUVW" alt="" /> </div> <div id="left" class="button-overlay left">◀</div> <div id="right" class="button-overlay right">▶</div> </div> <script> $("#right").click(function() { var currentLeft = parseInt($('.items').css('left')); $('.items').css('left', (currentLeft - 800) + 'px'); }) $('#left').click(function() { var currentLeft = parseInt($('.items').css('left')); $('.items').css('left', (currentLeft + 800) + 'px'); }) </script>

body { background-color: #141414; } .flex-container { display: flex; flex-direction: row; height: 100%; margin-top: 10%; max-width: 10000px; } .image { height: 120px; width: 200px; padding: 3px; transition: .3s; transition-timing-function: ease-in-out; } .items { justify-content: center; display: flex; align-items: center; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); transition: left .5s; transition-timing-function: ease-in-out; position: fixed; } .image:hover { height: 220px; width: 350px; transition: .3s; transition-timing-function: ease-in-out; z-index: -10; } .button-overlay { z-index: 10; position: absolute; height: 120px; width: 50px; background-color: rgba(0, 0, 0, 0.5); color: #fff; font-size: 3em; align-items: center; display: flex; opacity: 0.9; top: 40%; cursor: pointer; } .left { left: 0; } .right { right: 0; }