0

I need to have elements positioned absolute inside a div with overflow hidden, however these elements with position absolute are visible outside the boundaries of the div with overflow hidden, I would need them not to be visible at all. See code: http://jsfiddle.net/xEYJc/

The idea is:

  • when you hover on one 'li' it will slide in (inside an iPhone frame) the respective picture

  • this the CSS for each image

        .first .search{
            position: absolute;
            width: 229px;
            margin: 94px 60px 40px -280px;
            -webkit-transition:margin-left 0.3s ease-out;
            -webkit-transition-delay:0.2s;
        }
    
  • and this is the CSS for the container:

        .iPhoneWrapper div{
            overflow-x: hidden;
            margin-left: 17px;
        }
    

As it stands the '.search' positioned absolute is visible outside the 'div' with overflow hidden and I need them to be hidden and only visible when sliding in.

1 Answer 1

1

The solution is simple:

add position: relative and overflow: hidden to your class .iPhoneWrapper, modified fiddle: http://jsfiddle.net/xEYJc/1/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.