Question

我正在制作图片库。我已将图像放在无序列表中。我在图像周围设置填充，而不是我尝试仅通过图像创建悬停效果（没有填充），所以我使用了calc（）函数。这是网站

http://rpz.startupweb.sk/vyrobky/

但是如何看待悬停效果并不能覆盖整个图像。整个图像有黑色覆盖，但在某些边缘，你可以看到白线。你能帮我写错吗或写正确的程序。非常感谢

未列入名单的代码：

ul.thumbnail {
position: relative;
list-style: none;
margin: 0 auto;
padding: 0;
}

ul.thumbnail li {
position: relative;
display: inline-block;
width: 23.5%;
cursor: pointer;
}

ul.thumbnail li img {
position: relative;
max-width: 100%;
padding: 1.875em;
}

关于效力的代码

.parent {
width: calc(100% - 3.75em);
height: calc(100% - 3.75em);
position: absolute;
top: 50%;
left: 50%;
display: block;
background-color: black;
opacity: 0;
transform: translate(-50%, -50%);
text-align: center;
transition: opacity 500ms;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
}

span.parent span {
display: inline-block;
position: relative;
top: 25%;
}

 ul.thumbnail li:hover span.parent{
opacity: 0.7;
}

.parent-icon {
padding: 25px;
}

Answer 1

封闭在Div区块内会带来你的解决方案

`HTML`
<li>
    <div class="img-container">
        <img src="" alt="thumb_5f">
        <span class="parent">
           <span class="parent-icon"></span>
        </span>
    <div>
</li>
`CSS`
.img-container{
   possition: relative;
}
ul.thumbnail li img{ padding: 0px; }
ul.thumbnail li{ padding: 30px; }

不要计算填充：悬停图像

1 个答案: