CODEWITHSUNDEEP
jquerycssoverflowtransformhidden
Michael G
Michael G

Reputation: 29

Can't get "overflow: hidden" to work on image

In this demo the image gets pushed to the side a bit and the "overflow" is hidden. I've installed the plugin and done everything as explained but my images just slide. I just can't see where the problem is.

here is the 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>

and here is the 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;
}

Upvotes: 1

Views: 786

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241248

Wrap the img element with a div, and use the following:

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

You were using the following to hide the overflow:

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

This didn't work because #content isn't a direct child of .cs-style-4 figure.

The structure of the markup used in the linked example was:

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

Upvotes: 1

Related Questions