Mark Laurence
-
Posts
5 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by Mark Laurence
-
-
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! -
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?
-
So, when the window size is reduced on that page (now moved here), those three menu bars on the right remain the same size and overtake the content area. I'm trying to make it so they change in correlation to the size of the content area.
-
I recently took over somebody else's website and am trying to get an element to size up and down when the window changes size. I tried to add Position: Absolute; to no avail. I currently have it as Position: Fixed so it moves with the scroll.
Specific page is here and I'm referring to the three sidebar nav menus on the left.#mySidenav a { position: fixed; /* Position them relative to the browser window */ left: -25px; /* Position them outside of the screen */ transition: 0.3s; /* Add transition on hover */ padding: 15px; /* 15px padding */ width: 200px; /* Set a specific width */ text-decoration: none; text-align: center; font-size: 18px; /* Increase font size */ color: white; /* White text color */ border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */ } #mySidenav a:hover { left: 0; /* On mouse-over, make the elements appear as they should */ text-decoration: underline; } #board { top: 320px; background-color: #5d2a2c; } #blog { top: 380px; background-color: #5d2a2c; } #kidswehelp { top: 440px; background-color: #5d2a2c;
Any help would be beyond amazing.
Remove Border from Image Gallery
in CSS
Posted · Edited by Mark Laurence
The page in question is Here
For the life of me, I cannot get rid of the bottom overhang.
Any suggestions? I is it possible at all?