放大一个图像，显示一个div在悬停

On an image hover, I want to zoom in the image and also display a div with the transparent background on it.

在图像悬停时，我想放大图像并显示带有透明背景的div。

演示:http://jsfiddle.net/9q4mT/

Here's my code. In the following example, when I hover over the image in the .image class, I want to zoom it, and want to display the link with class .mylink in the center of the div.

这是我的代码。在下面的示例中，当我悬停在.image类中的图像上时，我想放大它，并想在div中心显示与class .mylink的链接。

I am able to zoom in on hover but when I add style for the .text, it does not zoom in the image anymore.

我可以放大鼠标悬停但是当我为。text添加样式时，它不会再放大图像。

HTML:

HTML:

<div id="box">
    <div class="image">
        <img src="http://s18.postimg.org/il7hbk7i1/image.png" />
    </div>
    <div class="text">
        <a class="mylink">link</a>
    </div>
</div>

CSS:

CSS:

#box {
    text-align: center;
    margin: auto;
    width: 250px;
    height: 250px;
    overflow: hidden;
    position: relative;
}

.image img {
    width: 250px;
    height: 250px;
    overflow: hidden;

}
.image img {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.image img:hover {    
    cursor: pointer;
    transform:scale(1.5);
    -ms-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -webkit-transform:scale(1.5);
    -o-transform:scale(1.5);
}

.text{
    position: absolute;    
    width: 100%;
    height: 100%;
    top: 0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.text:hover{
    background: rgba(255, 255, 255, 0.5);    
}

.text a{
    position: absolute;
    top: -100%;   
     -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.text:hover a{    
    top: 50%;
}

1 个解决方案

#1

Try changing your CSS:

试着改变你的CSS:

Adding display:block to your image
添加显示:块到您的图像
Adding the initial transform scale(1) to your img
将初始转换规模(1)添加到img。
Adjust the hover CSS rule to #box:hover .image img
将鼠标悬停CSS规则调整为#box:鼠标悬停。image img

Code Example : http://codepen.io/jonathan/pen/MYBbMG

代码示例:http://codepen.io/jonathan/pen/MYBbMG

.image img {
   display:block;
   width: 250px;
   height: 250px;
}

.image img {        
    -moz-transform:scale(1);
    -webkit-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#box:hover .image img {    
    cursor: pointer;
    -moz-transform:scale(1.5);
    -webkit-transform:scale(1.5);
    -o-transform:scale(1.5);
    transform:scale(1.5);
}

#1