Question

我正在尝试为我的网站制作一个自适应图像页面。到目前为止，我已经做到了这一点，因此页面上的图像都是响应式的，并且保持居中，以适应浏览器的大小。

我的问题是，当我将鼠标悬停在图像上时，它会放大，但会将所有其他图像推出。我希望它能扩大，但所有其他图像保持其位置，我尝试绝对位置，但这不起作用。

另外我真的想在图像中添加悬停文字，我希望这样当图像悬停时你可以看到中心的文字，我想用html / css做这个而不需要文本的单独图像，可能没有javascript。

这是我目前的HTML;

<div class="imgwrap">
<img src="http://placehold.it/120x120" alt="DTE" />
<img src="http://placehold.it/120x120" alt="DTE" />
<img src="http://placehold.it/120x120" alt="DTE" />
<img src="http://placehold.it/120x120" alt="DTE" />
<img src="http://placehold.it/120x120" alt="DTE" />
<img src="http://placehold.it/120x120" alt="DTE" />
<img src="http://placehold.it/120x120" alt="DTE" />
<img src="http://placehold.it/120x120" alt="DTE" />
<img src="http://placehold.it/120x120" alt="DTE" />
</div>

这是我的CSS;

.imgwrap {
width:90%;
margin:0 auto;
padding:5px;
overflow:hidden;
text-align:center;
}
.imgwrap img {
display:inline-block;
width:300px;
height:200px;
margin:5px;
cursor:pointer;
-webkit-transition:opacity 0.26s ease-out;   
-moz-transition:opacity 0.26s ease-out;   
-ms-transition:opacity 0.26s ease-out;   
-o-transition:opacity 0.26s ease-out;   
transition:opacity 0.26s ease-out; 
border-style:solid;
border-color:black;
border-width:1px;
padding:5px;
transition:500ms;

}



.imgwrap:hover img {
opacity:0.5;
}

.imgwrap:hover img:hover {
opacity:1;
width:400px;
height:266px;
transition:500ms;
}

@media screen and (max-width:500px) {
.imgwrap img {
    width:200px;
    height:133px;
}
}

此外，还有一个JS小提琴，您可以看到我的图片页面的实时版本http://jsfiddle.net/Z66Z9/ 您可能需要扩展“结果”框，以便您可以看到我的图像页面的真实外观。

非常感谢你的帮助。

Answer 1

图片聚焦：使用CSS3 transform: scale属性。

悬停文字：在CSS中使用div.wrap和:hover规则将文本opacity的更改更改为0。

<强> FIDDLE

HTML：

<div id="container">
    <div class="wrap">
        <img src="http://lorempixel.com/output/fashion-q-g-640-480-2.jpg" alt="DTE" />
        <p>Text here</p>
    </div>
    <div class="wrap">
        <img src="http://lorempixel.com/output/city-q-c-640-480-2.jpg" alt="DTE" />
        <p>Text here</p>
    </div>
    <div class="wrap">
        <img src="http://lorempixel.com/output/sports-q-g-640-480-4.jpg" alt="DTE" />
        <p>Text here</p>
    </div>
    <div class="wrap">
        <img src="http://lorempixel.com/output/nature-q-c-640-480-8.jpg" alt="DTE" />
        <p>Text here</p>
    </div>
    <div class="wrap">
        <img src="http://lorempixel.com/output/fashion-q-c-640-480-7.jpg" alt="DTE" />
        <p>Text here</p>
    </div>
</div>

CSS：

#container {
    text-align:center;
    margin: 50px;
}
.wrap{
    display:inline-block;
    position:relative;
    cursor:pointer;
}
.wrap p{
    position:absolute;
    opacity:0;
    top:50%;
    left:-8%;
    padding:5px;
    text-align:center;
    width:113%;
    font-size:20px;
    line-height:20px;
    margin-top:-10px;
    z-index:3;
    background:rgba(255,255,255, 0.7);
    transition:1s;
}

.wrap img {
    display:block;
    width:300px;
    height:200px;
    margin:5px;
    -webkit-transition:opacity 0.26s ease-out;
    -moz-transition:opacity 0.26s ease-out;
    -ms-transition:opacity 0.26s ease-out;
    -o-transition:opacity 0.26s ease-out;
    transition:opacity 0.26s ease-out;
    transition:500ms;
}
#container:hover img {
    opacity:0.5;
}
#container:hover .wrap:hover img {
    opacity:1;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    z-index:2;
    position:relative;
    transition:500ms;
}
.wrap:hover p {
    opacity :1;
}


@media screen and (max-width:500px) {
    #container img {
        width:200px;
        height:133px;
    }
}

在悬停图像放大和文本显示它CSS3

1 个答案: