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

发布时间：2020-12-14 22:53:49 所属栏目：资源来源：网络整理

导读：我正在尝试为我的网站制作一个响应式图像页面.到目前为止,我已经做到了这一点,因此页面上的图像都是响应式的,并且保持居中,以适应浏览器的大小. 我的问题是,当我将鼠标悬停在图像上时,它会放大,但会将所有其他图像推出.我希望它扩大,但所有其他图像保持其位

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

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

另外我真的想将悬停文本添加到图像中,我希望它能够在图像悬停时从中心看到文本,我想用html / css做这个,而不需要单独的图像对于文本,可能没有JavaScript.

这是我目前的HTML;


这是我的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/的实时版本
您可能需要扩展“结果”框,以便您可以看到我的图像页面的真实外观.
非常感谢你的帮助.


最佳答案
图像聚焦：使用CSS3转换：scale属性.
悬停文本：在CSS中使用div.wrap和：hover规则将文本不透明度的更改更改为0.
FIDDLE
HTML：


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,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;
    }
}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!