Home/ Questions/Q 775003
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T19:13:14+00:00

I’ve just been learning some jQUery to get a basic image gallery going on

  • 0

I’ve just been learning some jQUery to get a basic image gallery going on a website I’m creating for a hotel but it’s currently not going to plan. I’ve got it so the arrows will cycle through images (no animation yet) but I decided that the arrows should fade in when the image is hovered over and fade out when not but this is messing up the CSS somehow.

The arrows start faded out by calling: $('.arrowRight').fadeOut(0);$('.arrowLeft').fadeOut(0);

at the start of the jQuery ready() function.

This is fine, but when you hover over the image and the arrows fade in, the image shifts to the right and I don’t know why. I suppose it could be because the left arrow now fading in means it is getting pushed over by it but the arrow has the following css:

position:relative;
top: -90px;
left: 25px;

Should a relative element be able to alter a normal element’s position?

If you need to try it out, just hover over the large (placeholder) image and they image will jump across when the arrows fade in and jump back when they fade out.

Any ideas why this is happening? I’m a jQuery noob.

Here is a link to the page: BeanSheaf Hotel Temporary Space

Thanks for your time,

InfinitiFizz

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    #imageContainer should have: position:relative

    arrowLeft should have:

    position:absolute;
top:90px;
left:5px;

    Relatively-positioned elements take up space in your layout. Since your arrows were relatively positioned they bump things around when they appear.

    In order to position things so this doesn’t happen, the items “on top” of the image need to be positioned absolutely. This means they are no longer part of the flow of the layout but are “on top” of it.

    Absolutely-positioned items need a point of reference for the point of origin (0,0). These items look at their wrapper and go up the HTML tree until they find the first relatively-positioned element to determine their origin point. If there is none, it uses the <body> as the point of reference.

    Because we are adding position:relative to imageContainer, the container now becomes the point of reference, allowing you to accurately position your arrows using top: and left:.

    • 0