Grid images spray all over the place, can I tame them?

[Nightwing]

Thanks @SamA74 for the encouragement but for now I’m going to stick with Eriks solution, but thanks again

[Nightwing]

Well I’ve made a tonne of progress thanks to a skip load of help from Sitepoint members. Now I would like to learn how to make the on hover images reponsive so they can fit a mobile.

The first two bride pics on the grid have the on hover effect I was after thanks to Erik. Now I wonder is there a way to make the larger on hover image fit better for mobile?

A good tutorial source would be good, I would like to see if I could do it my self first, just need a bit of guidance

Heres the code pen:
http://codepen.io/Pingbat/pen/oXpjWN

Thanks again,
David

[RyanReese]

@Nightwing

Now I wonder is there a way to make the larger on hover image fit better for mobile?

Mobile doesn’t support hover, so perhaps you should rethink this? Users on mobile would have to tap the images. Do you plan on linking these brides to another page anytime in the future?

[Nightwing]

Hi Ryan,

“Do you plan on linking these brides to another page anytime in the future”,
no not on the page i’ve been working on. This page is a kind off inner page showing examples of a wedding.

But on the home page yes the grid would need to click through to an associated inner page, originally i used the below as my home page but then the grid layout gets bent out of shape wjth different viewport sizes so ended up working on what we’ve got now,
http://codepen.io/Pingbat/pen/xbBQqE

Maybe the home page could use this grid which i like but just does not have hover over enlarged images and is hyperlinked thrrough to the relevant wedding.

Hope this all makes sense