Resize width according to sibling.

[amrac]

I’ve got a span behind an image that can be seen whenever the user hovers over the image. When the window changes to a smaller width and the layout changes from a 3 column to a 1 column, both the image and the span resize, but the span’s width is the window’s full width. Is there a way to resize the span’s width to the image’s width (sibling)?
This works the same way in IE (10 or 9), Chrome, Firefox, Safari and Opera.
Here’s the link to the page:http://db.tt/nZI2eMTE. I’d like to thank in advance to anyone that can help me.

[Paulie_D]

Without even looking at the code I’m thinking that’s a weird way to go about it.

Have you considered something like this?

http://codepen.io/Paulie-D/pen/2fb6dbdbae0a5bd8274a22ee152504e2

or this

http://codepen.io/Paulie-D/pen/f66a765171c3d3980c825a7c089fc726

[amrac]

Thank you so much! I went through your code and I was able to solve it. I’ve updated the example given:http://db.tt/i5sKuwp7.
I made a few changes like adding a border and hiding the images on hover. But I still have one problem. When the layout changes to 1 column the images are horizontally aligned to the center. How can I make them align to the left?
My CSS is really weak. Thanks a lot for helping me.

[Paulie_D]

That might take a while but I’ll see what I can do.

[amrac]

Thanks a lot, I really appreciate your help.

[Paulie_D]

Aha.

You have div with a class of `body2` which has a set width of 950px.

That width doesn’t get overridden in a media query anywhere that I can tell and that seems to be the issue.

Change the width property of `.body-2` to `max-width:960px` and I think it will work a little better.

[amrac]

You were right, I’ve made that change and those images are going to the left. Thanks a lot. You’ve made my day worthwhile.

[Author]

Posts