Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


Sliding image under static image

Posted on 2011-05-09
Medium Priority
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:  http://sidekickassociates.com/d/test.html

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

Please help.


Question by:scottlum
  • 2
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35726739
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

Sudaraka Wijesinghe earned 1500 total points
ID: 35727114
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 fix.zip 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 (alternate.zip) 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

ID: 35730077
@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

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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will show, step by step, how to integrate R code into a R Sweave document
Measuring Server's processing rate with a simple powershell command. The differences in processing rate also was recorded in different use-cases, when a server in free and busy states.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

580 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