Question

我创建简单的图像悬停，只想要不透明的图像。但是这种情况下，文字会悬停。如何使图像悬停并在响应使用时使缩放图标居中？小提琴：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

同时包含图片和<span>标记的容器是您的<a>标记，我们需要确保两件事：

<a>标记内的元素保留在容器中，为此我们使用position: relative;
<span>来自<img>，但它应悬停在它上面，所以我们添加float:left;让它留下来（这是有效的，因为你有position: absolute上的<span>
此外，由于我们之前的容器，您的文字可能也会float，因此我在每张图片后添加了clear:both。您的其他一些属性（如width和top）也发生了变化。

<强> DEMO

Answer 2

在img-zoom课程中，您需要包含该效果的宽度和高度。在你现在拥有100％高度和95％宽度的时候（你可以注意到当你将鼠标悬停在它上面时，右边有5％没有得到它的层）。

因此，您可以通过几种方式进行操作，例如将img-zoom的宽度和高度设置为图像和缩放图标的大小。但这可能会打破其他决议等等，所以要小心。

图像悬停到下一个文本，并在响应时使缩放图标居中

2 个答案: