CODEWITHSUNDEEP
htmlcss
Alexu
Alexu

Reputation: 243

Expanding div to a 100% width

Well this is an example I have taken from StackOverflow post I want to have the similar effect but it expands when I hover over the div. But I want to expand when the page is loaded only through css. I can achieve it through jquery but I only want to have it done through css. Can anyone help?

.wrapper {
    background:#DDD;
    display:inline-block;
    padding: 10px;
    height: 20px;
    width:auto;
}

.label {
    display: inline-block;
    width: 1em;
}

.contents, .contents .inner {
    display:inline-block;
}

.contents {
    white-space:nowrap;
    margin-left: -1em;
    padding-left: 1em;
}

.contents .inner {
    background:#c3c;
    width:0%;
    overflow:hidden;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}



.wrapper:hover .contents .inner {
   
    width:100%;
}
<div class="wrapper">
    <span class="label">+</span><div class="contents">
        <div class="inner">
            These are the contents of this div
        </div>
    </div>
</div>

Upvotes: 1

Views: 54

Answers (2)

Faical ARAB
Faical ARAB

Reputation: 385

Here is your solution using only css3, You can check the animation property Here. 

.wrapper {
    background:#DDD;
    display:inline-block;
    padding: 10px;
    height: 20px;
    width:auto;
}

.label {
    display: inline-block;
    width: 1em;
}

.contents, .contents .inner {
    display:inline-block;
}

.contents {
    white-space:nowrap;
    margin-left: -1em;
    padding-left: 1em;
}

.contents .inner {
    background:#c3c;
    width:0%;
    overflow:hidden;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}


.inner {
    width: 0px;
    background-color: red;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    from {width: 0px;}
    to {width: 100%;}
}

/* Standard syntax */
@keyframes example {
    from {width: 0px;}
    to {width: 100%;}
}
<div class="wrapper">
    <span class="label">+</span><div class="contents">
        <div class="inner">
            These are the contents of this div
        </div>
    </div>
</div>

Upvotes: 1

J. Shabu
J. Shabu

Reputation: 1053

Please add this class so that it will be full width when page loads

    .wrapper .contents .inner
    {
    width:100%;
    animation-name: example;
animation-duration: 4s;
    }
    @keyframes example {
        0%   {width:0%;}
        100% {width:100%;}
    }

Upvotes: 2

Related Questions