CODEWITHSUNDEEP
htmlcss
PeterInvincible
PeterInvincible

Reputation: 2310

Shrink a div to it's horisontal center

I am trying to implement a CSS3 animation on my site where 2 divs would squeeze together another div with a background image. It's pretty hard to explain, so I made a quick video. Please note that the problem I want to solve is present on this video.

What I'd like to do is when animating the height of a div, it wouldn't shrink to it's horisontal center instead of it's top. Can this be done in any way?

My HTML:

<div id="container">
    <div id="top-bar">
        <ul id="nav">
            <li><a href="index.php">Főoldal</a>
            </li>
            <li><a href="szolgaltatasok.html">Szolgáltatások</a>
            </li>
            <li><a href="portfolio.php">Portfólió</a>
            </li>
            <li><a href="kapcsolat.html" id="kapcsolat">Kapcsolat</a>
            </li>
        </ul>
    </div>
    <div id="content">
        <div id="card">
            <!-- The orange card : irrelevant -->
        </div>
        <div id="main">
            <div id="inner-content"></div>
        </div>
    </div>
    <div id="bottom-bar">
        <div id="logo">
            <!-- Logo Image -->
        </div>
    </div>
</div>

Please check the jsFiddle examples for the full code.

jsFiddle code

jsFiddle Full Screen Result

Upvotes: 0

Views: 101

Answers (2)

stackErr
stackErr

Reputation: 4170

I have created a fiddle here. Every time you click the button it will add/remove the class that has the scaling transform.

CSS:

.box {  
    width: 300px;  
    height: 300px;  
    background: black;
    -webkit-transition: all .6s ease-in-out; 
    transition: all .6s ease-in-out;;  
}  

.box-change {  
    -webkit-transform: scale(0,0); 
}

JS:

$(function() { 
     $("#bt").click(function() {  
         $(".box").toggleClass("box-change");  
         }); 
    });

HTML:

<div class="box"></div> 
<input type="button" value="Let's Do This Thing" id="bt">

You can change CSS to this:

.box-change {  
    -webkit-transform: scale(1,0); 
}

for shrinking to "horizontal center" effect.

Upvotes: 1

vals
vals

Reputation: 64164

See this demo

fiddle

The CSS is:

div {
    width: 200px;
    position: absolute;
}
.mid {
    background: url("http://placekitten.com/200/300");
    height: 200px;
    top: 100px;
    -webkit-transition: all 2s;
    transition: all 2s; 
}

.top {
    top: -100px;
    height: 100px;
    background-color: gray;
}

.bottom {
    bottom: -100px;
    height: 100px;
    background-color: gray;
}

.mid:hover {
    height: 0px;
    margin-top: 100px; 
    background-position: 0px -50px;
}

The trick is to modify the height, and at the same time change the margin-top so that the center stays at the same place. And at the same time change the background position, also accordingly.

I have done this effect because this is what I saw in the video, even though your question seems to ask for the background shrinking. If what you want is the later, please say so.

Upvotes: 1

Related Questions