Sliding image under static image

Posted on 2011-05-09
Last Modified: 2013-11-05

I need some help in enhancing a script that slides an image out from below a static image.  

The problem is that I have a second row of images that is supposed to be just below the first row.  I want the sliding image in the first row to drop down on top of the second row.

Please see what I currently have:

AS you can see, there is a large gap between the first and second row--this undesirable.

Please help.

Question by:scottlum
    LVL 75

    Expert Comment

    by:Michel Plungjan
    Hmm, you can try setting the zIndex of the covers in the top row to  100, the images under them to 50, then the z-index of the covers on the second row to 25
    But I tried for a while and did not succeed in closing the gap
    LVL 18

    Accepted Solution

    Here's how I would approch to fix your problem:

    First, the second row is pushed down by the fixed height of .icards, os I would remove that
    .icards {
    	/*height: 300px;*/
        margin: 0px 2px 5px 2px ;

    Open in new window

    That positions everything nicely but creates another problem by not showing the drop down image on hover (caused by the overflow: hidden)
    To fix that, I would explcitly adjust the overflow property of .icards on hover in/out.
    On Hover in I set the overflow to visible and on hover out (after the animation completes) I set the overflow back to hidden.

    Then also to get the drop down image to show bove the .icards in the second row I will set the z-index of the current/hovered .icards to someting higher (10)
    $('.vertical').hover(function() {
    	$(this).css({'overflow':'visible', 'z-index':10});
        $('img.drop', $(this)).stop().animate({top: '122px'}, 500);
    },function() {
    	var div=$(this);
        $('img.drop', $(this)).stop().animate({top: '-22px'}, 500, '', function(){div.css({'overflow':'hidden', 'z-index':0})});

    Open in new window

    Attached contain the bove changes, but as you can see it's still buggy because the part of the drop down image pops out on top of the .icards just before and after the animation.
    I have attached another ( approch which used a different animation style (curtain slide using height, instead of normal slide using position).

    I hope you can fine a solution best suite for you among these guidelines.

    Author Comment

    @sudaraka:  you;re right--the first solution introduces an anomaly and the second is not the behavior i'm looking for--i need a sliding down effect.

    Is there an alternate way to just push down the second row when the drop down in the first row slides down?

    Author Closing Comment

    Very helpful and took the time to find an alternative solution.   Great person!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
    Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
    Learn the basics of strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
    Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now