CSS3: hide overflow for transform effect

Question

I'm trying to make a simple CSS3 hover effect over the image. I'm trying half the image to show transparent. To make it easier to see the issue, I've set it as black.

<div class="section">
    <img src="http://placekitten.com/110/155" />
    <div class="efx" />
</div>

.section{
    width:700px;
    background-color:orange;
    height:170px;
    position:relative;
    margin:50px;
}

.section:hover .efx{
    height:155px;
}

img{
    width:110px;
    height:155px;
}

.efx{
    overflow:hidden;
    background-color: black;
    z-index: 10;
    left: -51px;
    position: absolute;
    height: 0px;
    width: 105px;
    transition: all .5s ease-in;
    transform: skew(35deg, 0deg);
    bottom:15px;   
}

If you look at the Fiddle here http://jsfiddle.net/5ST86/ you can see what the result is. Below is what I'm trying to achieve.

enter image description here

Josh Crozier · Accepted Answer · 2013-12-27 01:31:30Z

4

Just add overflow:hidden to the section element.

jsFiddle example

.section{
    width:700px;
    background-color:orange;
    height:170px;
    position:relative;
    margin:50px;
    overflow:hidden;
}

answered Dec 27, 2013 at 1:31

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Guerin Over a year ago

Thanks Josh. In the case of this, what would you recommend? jsfiddle.net/5ST86/3 I can't really change the mark-up too much. It seems to me one of those simple things that one just can't crack :(

Collectives™ on Stack Overflow

CSS3: hide overflow for transform effect

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related