Well, you've got three problems. One I've already explained to you in that you've got "classes for nothing" AND non-semantic markup. The other is that you're trying to work in pixels, AND trying to use positioning for what I think should be transform:scale's job. It's a newer property that I'm not too surprised you don't know yet.
First let's fix the markup. A gallery like this is a list of choices. As such it goes into a UL with LI just like how you'd write a menu. If we wrap ALL the content in an anchor we can hook that for the style and still have legacy browser support if you care,
YES, anchors around block level tags
USED[/b] to be invalid. HTML 5 changed that rule. I'm not 100% kosher with that, but here it doesn't matter, you don't need block level tags inside it.
Because honestly, I doubt you have enough text for each of these to be a paragraph, and P is kind of redundant inside proper line-items in situations like this.
To that end, gut the markup down to:
<ul id="gallery">
<li>
<a href="images/gallery/test_full.jpg">
<img
src="images/gallery/test_thumb.jpg"
alt="describe this image, ALT IS NOT OPTIONAL"
>
Some text describing the image
</a>
</li><li>
<a href="images/gallery/test2_full.jpg">
<img
src="images/gallery/test2_thumb.jpg"
alt="describe this image, ALT IS NOT OPTIONAL"
>
Some text describing the image
</a>
</li><li>
<a href="images/gallery/test_full.jpg">
<img
src="images/gallery/test_thumb.jpg"
alt="describe this image, ALT IS NOT OPTIONAL"
>
Some text describing the image
</a>
</li><li>
<a href="images/gallery/test_full.jpg">
<img
src="images/gallery/test_thumb.jpg"
alt="describe this image, ALT IS NOT OPTIONAL"
>
Some text describing the image
</a>
</li><li>
<a href="images/gallery/test_full.jpg">
<img
src="images/gallery/test_thumb.jpg"
alt="describe this image, ALT IS NOT OPTIONAL"
>
Some text describing the image
</a>
</li><li>
<a href="images/gallery/test_full.jpg">
<img
src="images/gallery/test_thumb.jpg"
alt="describe this image, ALT IS NOT OPTIONAL"
>
Some text describing the image
</a>
</li>
</ul>Note the inclusion of ALT and the removal of all the P and "classes for nothing".
To get them to have equal height so that the floats don't ride up funky, the new "flex" layout is probably a safe bet, though you could also use inline-block instead of the floats. Depends on what else you're planning for styling here. Just beware that if you go with flex, IE9 and earlier won't have columns.
Assuming a reset is in use and everything is set to box-sizing:border-box, the CSS would go something like this:
#gallery {
list-style:none;
display:flex;
flex-wrap:wrap;
justify-content:center;
max-width:48em;
margin:0 auto;
}
#gallery a {
display:block;
max-width:12em;
vertical-align:top;
padding:1em;
}
#gallery img {
display:block;
width:100%;
height:auto;
margin:0 auto 1em;
transition:transform 0.5s;
}
#gallery a:focus img,
#gallery a:hover img {
transform:scale(1.25);
}
Remember -- as I told you last week -- to set :focus in addition to :hover so that keyboard navigation isn't left out in the cold. Don't worry, you'll start remembering these little details given time.
Also notice how I converted to using EM. With box-sizing set a 12em max-width minus the 1EM internal padding gives you 10em, which at normal font-size is 160px. This makes the thumbnails dynamic so that users like myself on 4k displays can get them larger without diving for the zoom. Remember what I said? Use EM whenever you can? Well, use 'em!
To that end between dynamic scaling and high res displays, I'd probably "bite the bullet" and use 2x resolution thumbs, so 320px wide. A bit bandwidth heavy, but that could probably be helped by using JPEG or even WEBP instead of PNG. Really the best image format for each thumb in "production" should be tested with the best format chosen.
Here's a live demo I tossed together for you:
https://cutcodedown.com/for_others/JesseWillWreckYa/gallery/The nice part of using flex here is that flex-wrap:wrap and the use of max-widths means it's already "responsive" without even resorting to media queries. Flex says that all containers inside it scale to share box-edges. With flex-wrap and a max-width on the children and a max width on the container, it will all auto-flow to fit.
And transform:scale means you don't have to play games width setting the width or positioning. The 1.25 scale for hover I came up with by just dividing the 160px you had by the 200px hover.
NOT too complicated once you gut out all the unnecessary doo-dads.
That about what you're looking for?
Recent Posts