Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Location
    Belgium
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow Overflow problem

    Hi guys!

    i've a problem with my overflow of 2 div's.

    I want to be the product div holding a image, and the productinfo is a black cover. I want the productinfo div to position it down and later i want to use it with CSS3 transition to bring more info.

    So with this code, at the moment, my 2nd div (productinfo) keeps visible when i move it down and I want it to be hidden. That why I use (overflow:hidden in my product CSS style.

    Can someone help me?

    CSS:
    Code:
    .product {
    	width: 187px;
    	height: 187px;
    	margin-top: 10px;
    	margin-left: 10px;
    	margin-right: 10px;
    	float: left;
    	border: 1px solid #000;
    	overflow: hidden;
                 backrgound-image: ...;
    }
    .productinfo {
    	background-color: rgba(0,0,0,0.7);
    	border-radius: 11px;
    	width: 187px;
    	height: 187px;
    	border: 1px solid #000;
    	float: left;
    	top: 125px;
    	position: absolute;
    }
    and for my HTML
    Code:
    <div class="product">
        <div class="productinfo"></div></div>

    Thanks for all the help!!

  • #2
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    400
    Thanks
    2
    Thanked 30 Times in 30 Posts
    If you want it hidden then you need to use display:none;

    overflow deals with how to handle content when it is too big to fit in its container.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #3
    New to the CF scene
    Join Date
    Dec 2012
    Location
    Belgium
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, i think i've explained my problem to bad...

    I've seen this example on YouTube... (http://www.youtube.com/watch?v=wZwnBkUDK9Q)

    now i've used the CSS3 propetry, opacity, but it doesn't gives the perfect transistion...

    Maybe someone can give the CSS style he used for getting the 2nd div positioning on the bottom..

    And also, Happy Newyear!!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •