Mark Laurence Posted May 6, 2017 Share Posted May 6, 2017 The page in question is Here I'm going to have a dozen or so images that I want lined up grid-style. They'll all be sized the same. But, I also want to have the hover overlay that's currently there. CSS is currently: <!-- THUMBNAIL --> <style> .container { position: relative; width: 50% } .image { display: block; margin: 3px; width: 50%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 3px; right: 0; height: 100%; width: 50%; opacity: 0; transition: .5s ease; background-color: #000000; } .container:hover .overlay { opacity: 1; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } </style> HTML for each image is: <div class="container"> <a href="../images/thankyounotes/football_equipment.jpg" data-lightbox="kidswehelp" data-title=""><img id="football" src="../images/thankyounotes/football_equipment.jpg" class="image"></a> <div class="overlay"> <div class="text">Testing This</div> </div> </div> Thoughts? Link to comment Share on other sites More sharing options...
Sunamena Posted May 6, 2017 Share Posted May 6, 2017 Is a flexbox what you are looking for? With a flexbox you can easily grid content. And i find it easy to get it responsive. Here you can find a step by step guide. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Link to comment Share on other sites More sharing options...
Mark Laurence Posted May 6, 2017 Author Share Posted May 6, 2017 This may actually be perfect. Will take a day or two till I code it, but I'll let you know how it works! Thank you! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now