悬停时放大图像并在其上显示文本CSS3

On hover image enlarge and text display over it CSS3

本文关键字：显示 文本 CSS3 放大 图像 悬停      更新时间：2023-09-26

我正在尝试为我的网站制作一个响应图像页面。到目前为止，我已经做到了，所以页面上的图像都是响应的，并保持浏览器大小的中心。

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

此外，我真的很想在图像中添加悬停文本，这样当图像悬停时，你可以从中心看到文本，我只想用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 fiddle，供您查看我的图像页面的实时版本http://jsfiddle.net/Z66Z9/您可能需要扩展"结果"框，以便查看我的图像页面的真实外观。

非常感谢你的帮助。

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

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

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;
    }
}
相关文章：