Image hover until next text and make zoom icon center when responsive

Question

I create simple image hover and want only image that opacity. But this case, the text get hover. How to make only image to hover and make zoom icon center when responsive use? Fiddle : http://jsfiddle.net/6U5Wd/

<div class='img-zoom'>
                        <a href='http://dummyimage.com/300x200/000/fff' data-lightbox='1' data-title='222'>
                        <img src='http://dummyimage.com/300x200/000/fff' class='img-responsive img-thumbnail' alt='222'>
                        <span class='glyphicon glyphicon-zoom-in'></span></a>
                    </div>          
                    <p align='justify'>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>
                    <ul type='square'>
                        <li>Lorem Ipsum is not simply random text</li>
                        <li>Lorem Ipsum is not simply random text</li>
                        <li>Lorem Ipsum is not simply random text</li>
                    </ul>

Answer 1

The container holding both the image and <span> tag is your <a> tag, we need to make sure of two things:

1. The elements inside the <a> tag stay within the container, for this we use the position: relative;

2. The <span> is coming after the <img> but it should be over it on hover, so we add float:left; for it to stay over (this works because you have the position: absolute on your <span>)

3. Additionally, your text is likely to float left too because of our previous container, so I have added clear:both after every image. A little of your other properties like width and top changed too.

DEMO

Answer 2

In the img-zoom class you need to contain the width and height of that effect. At the point you have it now it`s doing a 100% height and 95% width (you can notice that when you hover over it you have a 5% on the right that does not get the layer over it).

So you can go about it a couple of ways, like giving the width and the height of img-zoom to be the size of the image and the zoom icon. But this might break it for other resolutions and whatnot, so watch out for that.