I have this fiddle where I have 4 images. When hovering one, images to the right will change their size correctly, but I dont understand why images to the left aren't running the same pattern when I'm explicitly stating that I want all of them to behave the same way.
Can someone help me out?
This is the html, Css in the fiddle
<a href="#" class="social1" ><img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocialStyle" /></a>
<a href="#" class="social2" ><img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocialStyle" /></a>
<a href="#" class="social3" ><img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocialStyle" /></a>
<a href="#" class="social4" ><img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocialStyle" /></a>
Your problem is that you only can watch with the "~"-operator for elements AFTER the given element. As far as i know it's even in CSS 3.0 not possible to select back/upward. This always needs a jQuery/Javascript solution. So you need to handle the hover event in JS maybe.
But I would say keep it as it is, it good even without a lefthand-element zoom ;)