CODEWITHSUNDEEP
htmlcss
Claudio
Claudio

Reputation: 894

HTML/CSS - Make Children stay inside Parent?

The header of this site expands on hover, revealing a hidden span. But the images, that are suppose to reveal smoothly, kinda lag outside the header. It's hard to explain, just take a look: http://jsfiddle.net/56t9r/

.header {
    background:#FFF;
    border-bottom:1px solid gray;
    box-shadow:0 0 10px;
    height:70px;
    position:fixed;
    top:0px;
    width:100%;
    z-index:2;
    transition: height 1s ease;
}
.header:hover {
    height: 120px;
    transition: height 1s ease;
}
.kielet {
    top:0px;
    width:100%;
    background: rgb(255, 255, 255);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(229, 229, 229, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0);
    /* IE6-9 */
    padding:0px;
    height: 0px;
    box-shadow: 0 4px 2px -2px gray;
    color: red;
    transition: height 1s ease;
}
.kielet nav {
    text-align: center;
    height: 0px;
    position: static;
    transition: height 1s ease;
}
.header:hover > .kielet nav {
    height:50px;
    position: static;
}
.kielet a {
    display: inline;
    left: 0px;
}

Upvotes: 0

Views: 191

Answers (1)

rafaelcastrocouto
rafaelcastrocouto

Reputation: 12161

Fiddle

.header {
  overflow: hidden;
  ...
}

.header :hover **

.header .kielet nav {
    height: 50px;
    position: static;
}

Upvotes: 2

Related Questions