HTML Grid Layout with Hover and Links

[garrettjaxon]

Hey guys, I am interesting in creating a grid layout for my personal portfolio and have been having some immense trouble adding images and text into the grid boxes. To show a pretty much similar thing that I want here is a site with a grid and image layout I desire:

https://jefffinley.org/portfolio/

If there’s not a way to do this with pure HTML and CSS that’s okay, I just have no clue even where to begin to get images fixed inside each box. It’d help a lot if I could get some direction. Thank you all!

[Beverleyh]

have been having some immense trouble adding images and text into the grid boxes.

If you show us the problem, and your code, in a reduced CodePen, we should be able to offer suggestions.

As for the link you’ve posted, you can use the dev console to inspect it – F12 in most browsers. I’m on mobile but it looks like there’s JavaScript at play. Maybe try researching “masonry layouts”?

[garrettjaxon]

Here is my code in a codePen, my problem is fitting images exactly into the grid boxes and enabling a hover on the grid boxes likle the example I showed. Thanks for the reponse!

https://codepen.io/garrettjaxon/pen/ZaZrwg

[JeroenR]

The effect you see in your example page uses this: https://masonry.desandro.com/
But you can look for examples done with just CSS.
A quick search results in these for example: https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb and http://w3bits.com/css-masonry/

[Author]

Posts