Question

在这个demo中，图像被推到一边，“溢出”被隐藏。我已经安装了插件并按照说明完成了所有操作，但我的图像只是滑动了。我只是看不出问题所在。

这是html：

<div id="content">
    <ul class="grid cs-style-4">
        <li>
            <figure>
                <img src="images/Img1-01.png">
                <figcaption>
                    <h3>Camera</h3>
                    <span>Michael Guerrero</span>
                    <a href="http://michaelguerrero.net">Take a look</a>
                </figcaption>
            </figure>
    </li>
</div>

这是css：

.grid {
padding: 20px 20px 100px 20px;
max-width: 1300px;
margin: 0 auto;
list-style: none;
text-align: center;
}
.grid li {
display: inline-block;
width: 350px;
margin: 0;
padding: 20px;
text-align: left;
position: relative;
}
.grid figure {
margin: 0;
position: relative;
}
.grid figure img {
max-width: 100%;
display: block;
position: relative;
}
.grid figcaption {
position: absolute;
top: 0;
left: 0;
padding: 20px;
background: #ffffff;
color: #939393;
}
.grid figcaption h3 {
margin: 0;
padding: 0;
color: #ff9900;
}
   .grid figcaption span:before {
content: 'by ';
}
.grid figcaption a {
text-align: center;
padding: 5px 10px;
border-radius: 2px;
display: inline-block;
background: #ff9900;
color: #ffffff;
}

.cs-style-4 li {
-webkit-perspective: 1700px;
-moz-perspective: 1700px;
perspective: 1700px;
-webkit-perspective-origin: 0 50%;
-moz-perspective-origin: 0 50%;
perspective-origin: 0 50%;
}
.cs-style-4 figure {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.cs-style-4 figure > #content {
overflow: hidden;
}

.cs-style-4 figure img {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.no-touch .cs-style-4 figure:hover img,
.cs-style-4 figure.cs-hover img {
-webkit-transform: translateX(25%);
-moz-transform: translateX(25%);
-ms-transform: translateX(25%);
transform: translateX(25%);
}
.cs-style-4 figcaption {
height: 100%;
width: 50%;
opacity: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.no-touch .cs-style-4 figure:hover figcaption,
.cs-style-4 figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}

.cs-style-4 figcaption a {
position: absolute;
bottom: 20px;
right: 20px;
}

Answer 1

使用img包裹div元素，并使用以下内容：

.cs-style-4 figure > div {
    overflow: hidden;
}

您使用以下内容隐藏溢出：

.cs-style-4 figure > #content {
    overflow: hidden;
}

这不起作用，因为#content不是.cs-style-4 figure的直接孩子。

链接示例中使用的标记结构为：

<li>
   <figure>
      <div>
         <img>
      </div>
      <figcaption>
         <h3></h3>
         <span></span>
         <a></a>
      </figcaption>
   </figure>
</li>

无法获得“溢出：隐藏”来处理图像

1 个答案: