How can I achieve this "pop out" effect?

[kerrinrose]

I’m looking to achieve this effect I mocked up in the pictures below, where an element appears to expand and popout in front of other elements, revealing more information. I don’t really even know where to start, I was hoping someone could point me in the right direction? wasn’t sure whether to post this in css or js as I’m sure it’ll use both

Thanks!

Here is the before state: http://s31.postimg.org/cy64gqk0r/beforestate.png
and after click: http://s31.postimg.org/d0d513hej/afterstate.png

[Shikkediel]

You might be able to do it with CSS but it’ll be a lot easier to control with JS. If you ask me, just add or remove a class when the item is clicked and do a transform: scale. But the exact style to be added depends a lot on how you want the enlarged item to look exactly of course.

Edit – and you’ll have to show some content that’s initially hidden…

[Paulie_D]

Yeah, depends on whether it’s the SAME image expanding or a different image in a modal…sort of a Lightbox effect.

I’d be using JS depending on the effect required (mostly for the clicking) but you could do with the checkbox hack as well I suppose.

[Shikkediel]

Looking at it again, the image is actually the same size. But that may just be in this example…

[kerrinrose]

Thanks, I’ve made some progress, here’s a codepen…

http://codepen.io/kerrinrose/pen/Yqvday

two things…I’d like the elements not clicked to stay in place rather than shift over, I’ve tried temporarily adding a position: absolute; to both but they both go to the left corner on top of each other if I do that

and also is it possible for the origin point of the animation to be centered for the center one and expanding out to the left on the right most one? I tried transform-origin for this one to no avail.

Thanks a lot

[Shikkediel]

A demo… with cats! Two major selling points we should be able to work with.

:-)

I’d like the elements not clicked to stay in place rather than shift over

Could you maybe explain what you mean by this?

It’s probably a bit more complicated than I initially anticipated on by the way. Let me see what I can put together…

Edit – here’s a first example with some minor adjustments :

Link

[kerrinrose]

wow, incredible! thank you, you are a wizard!

[Shikkediel]

I fiddled with it some more so an opened item will now automatically resize to small again when another is clicked.

:-)

[kerrinrose]

awesome! okay, I actually need this to work for multiple rows where the number of items is not predetermined (it will be populated in on load) any ideas? It looks to me like right now all the items are absolute positioned and a new item will just be under the others?

[Shikkediel]

If the items are in a responsive grid (that’s what I take from that), you’d probably have to go a step further and use a cloned or pseudo element that is absolutely positioned. It’ll always mess with the layout otherwise. Responsive designs are usually not based on position: absolute. It’ll likely require more JS to determine if an item has “neighbours” and if so, how many in order to make the enlarged item zoom correctly if it’s on the side of a row.

[kerrinrose]

Thanks! With the help of a friend I was able to achieve the effect I was after. Not sure if it’s the most elegant solution but for demo purposes, it works :) Couldn’t have done it without your help, thank you!

Link

[Shikkediel]

Looks good to me, glad I could help a bit. But since I like code as clean as can be, here’s a slightly sleeker version.

:-)

var i = 0;

$('.item').each(function() {

    i++;
    i = i%3;

    if (i == 1) $(this).addClass('left');  
    else if (i == 2) $(this).addClass('middle');
    else $(this).addClass('right');
});

$('.absItem').on('click', function() {

    var active = $(this).parent().hasClass('index');

    if (!active) {
    $('.scaleTransLeft').removeClass('scaleTransLeft');
    $('.scaleTransMid').removeClass('scaleTransMid');
    $('.scaleTransRight').removeClass('scaleTransRight');
    $('.index').removeClass('index');
    }

    if ($(this).parent().hasClass('left')) $(this).toggleClass('scaleTransLeft');
    else if ($(this).parent().hasClass('middle')) $(this).toggleClass('scaleTransMid');
    else if ($(this).parent().hasClass('right')) $(this).toggleClass('scaleTransRight');

    $(this).parent().toggleClass('index');
});

The % here is the modulus operator, quite handy in this case.

i = i%3;

[Author]

Posts