CODEWITHSUNDEEP
csstransition
BrunoWB
BrunoWB

Reputation: 135

How to transition 2 divs at the same time?

I'm trying to make an animated menu that when I hover over it , the background (or image) reduces and at the same time the text expands.

Thats my style sheet :

.menus {
    float: left;
    background-image: url(images/menus_bg.png);
    width: 208px;
    height: 283px;
    }
.menusimg {
    width: 208px;
    height: 283px;
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(images/menu1.png);
    }
.menusimg:hover {
    background-size: 80% 80%;
    }
.menusimg, .menusimg:hover {
    -webkit-transition: background-size 0.2s ease-in ;
    }
.menustxtbox {
    font-family: MP;
    padding-top: 240px;
    width: 208px;
    height: 283px;
    color: #4c4c4c;
    font-size: large;
    text-shadow: gray 0.1em 0.1em 0.2em;
    }
.menustxtbox:hover {
    padding-top: 235px;
    font-size: x-large;
    color: #4fa3f9;
    }
.menustxtbox, .menutxtbox:hover {
    -webkit-transition:font-size 0.1s linear;
    -moz-transition:font-size 0.1s linear;
    }

and the html :

    <div class="menus">
        <div class="menusimg">
        </div>
        <div class="menustxtbox">
            Text
        </div>
    </div>

Any ideas? A simple Java script or anything that will solve this problem? :) Thank you in advance ^^

Upvotes: 1

Views: 1963

Answers (2)

ntgCleaner
ntgCleaner

Reputation: 5985

Well, without any code to see that you've done anything or tried anything with javascript, I would suggest this:

Change your CSS to make real sizes of font size first:

.menustxtbox {
    font-size:40px;
}

then make some jquery

$('.menus').hover(function(){
    $('.menusimg').animate({width: "100px"});
    $('.menustxtbox').animate({fontSize: "90px"});
}, function(){
    $('.menusimg').animate({width: "208px"});
    $('.menustxtbox').animate({fontSize: "40px"});
});

Then delete your :hover css styles

And if you want to use hover, I would suggest looking into hoverintent

UPDATE for a comment below

To do this for each separate menu item, you will have to name things a certain way. Here's an example.

HTML

<div class="menu">
    <div class="menuItem" id="menu1">
        <div class="menusimg"></div>
        <div class="menustxtbox"></div>
    </div>
    <div class="menuItem" id="menu2">
        <div class="menusimg"></div>
        <div class="menustxtbox"></div>
    </div>
    <div class="menuItem" id="menu3">
        <div class="menusimg"></div>
        <div class="menustxtbox"></div>
    </div>
</div>

Then with jQuery, you will have to use $(this) and .children()

$('.menuItem').hover(function(){
    $(this).children('.menusimg').animate({width: "100px"});
    $(this).children('.menustxtbox').animate({fontSize: "90px"});
}, function(){
    $(this).children('.menusimg').animate({width: "208px"});
    $(this).children('.menustxtbox').animate({fontSize: "40px"});
});

When you use $(this), you will do whatever you want to the specific thing you are trying to use. Then you just go up or down from there using parent or children to do something to either of those.

Upvotes: 0

Miro
Miro

Reputation: 8660

I second what ntgCleaner said.

In addition you can use:

$('.menus').hover(function(){
    $('.menusimg').addClass('active');
    $('.menustxtbox').addClass('active');
}, function(){
    $('.menusimg').removeClass('active');
    $('.menustxtbox').removeClass('active');
});

And your css would have:

.menusimg.active, .menusimg.active{
 -webkit-transition: background-size 0.2s ease-in ;
}

etc.

Upvotes: 1

Related Questions