我正在尝试为我的网站制作响应式图片页面。到目前为止,我已经做到了,所以页面上的图像都是响应式的,并且无论浏览器的大小如何,都保持居中。
我的问题是,当我将鼠标悬停在一张图片上时,它会放大,但会将所有其他图片推开。我希望它能放大,但所有其他图像都保持其位置,我尝试过绝对位置,但这没有用。
另外我真的很想在图像中添加悬停文本,我希望这样当图像悬停时你可以看到中心的文本,我想只用 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。
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;
}
}
关于javascript - 悬停图像放大并在其上显示文本 CSS3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22932981/