Member Avatar for Racoon200

how can i make a group of images to align up or down?
take a look:
http://www.freewebs.com/racoon200

What i wan't to do is that those images get down, so they woudn't bounce so much when you hover them.

  • 4 Contributors
  • 9 Replies
  • 328 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by Racoon200

Dani AI

Generated

Quick summary and context: wants a row of icons that stay neatly aligned and "pop out" smoothly on hover without shifting the page (something complained about). was on the right track with fixed sizing and pointed out layout containers — both helpful. Below is a modern, CSS-first approach that keeps everything anchored at the bottom and animates smoothly without causing layout reflow.

Use a bottom-aligned container plus CSS transforms for the hover effect. Transforms (translate/scale) animate on the compositor thread and do not force layout recalculation, so neighbours won’t jump around. Reserve enough vertical space in the container equal to the largest scaled icon to avoid clipping.

/* container: align bottoms, reserve height for scaled icons */
.iconbar {
  display: flex;
  align-items: flex-end;    /* anchors images to bottom */
  gap: 8px;
  height: 70px;             /* >= max_icon_height * scale_factor */
}

/* icons: smooth popout on hover using transform only */
.iconbar img {
  display: block;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1);
  transform-origin: center bottom; /* pop out upwards */
  will-change: transform;          /* hint for smoother compositing (use sparingly) */
}

.iconbar img:hover {
  transform: translateY(-8px) scale(1.18);
}

Notes and quick troubleshooting:

  • Compute container height: if base icon is H and scale is S, set height >= H * S.
  • If you must support ancient browsers, add a JS fallback; otherwise CSS transitions are cleaner and faster.
  • Don’t animate width/height/top/left for hover effects — they trigger reflow and layout shift. (web.dev)
  • Read the CSS transition and will-change docs for fine tuning and caveats. (developer.mozilla.org)

This keeps the row visually anchored, gives the gradual pop you wanted, and avoids the sudden layout jumps that annoy users.

Recommended Answers

All 9 Replies

Member Avatar for FC Jamison

Have you tried specifying a height and width for each image?

<body>
<center>
<div id="macbar" align="middle">
<a href="http://www.google.com" target="body"><img src="img/ball.bmp" align="middle" height="50" width="50"></a><nobr>
<a href="http://www.google.com" target="body"><img src="img/sergant.bmp" align="middle" height="50" width="50"></a><nobr>
<a href="http://www.google.com" target="body"><img src="img/xbox.bmp" align="middle" height="50" width="50"></a><nobr>
</div>
</center>
<!-- --><script type="text/javascript" src="/i.js"></script></body>
Member Avatar for Racoon200

Well, i halfly achieved what i wanted with css.
Take a look again if you wish.
What I want now, is to make the images on mouseover popout gradiently, not instantly.

Could that be done in javascript?

Member Avatar for MidiMagic

Those things are annoying!

I hate pages which change just as I am about to click. I once bought something on eBay because the page shifted just as I tried to click on the bid button. It put the Buy It Now button where I clicked, and I didn't notice it had happened. I ended up paying more than I intended to bid.

Member Avatar for Racoon200

thats because your to desperate for clik'n. Have you used a mac? What iam doing is like a way-more-crapy than mac's bar, but its m first time so...

Member Avatar for MidiMagic

I want the page to STAY PUT!


No ads popping in and out. No moving text. No objects changing size. If anything moves, it had better be demonstrating a principle.

Otherwise, I leave the page.

Member Avatar for MattEvans

Make a table; put each of the images in their own table cell, and make this CSS apply to those cells:

td.always_center
{
   text-align:center;
   vertical-align:center;
   width: 100px;
   height: 100px;
}

Where I put "100px" for width and height: change that for the largest possible size that (or a tiny bit bigger than) an image can be. Now, when the images are small, they will sit in the middle of the cell; when they are big; they will fill the cell.

If you dislike tables for any reason; there's probably a hacky solution with auto-margins; but this is one of those case where, in my opinion, table is best.

Member Avatar for Racoon200

Well, i guess i will give up cause i feel lazy for doing tables. But it will be awesome.

Member Avatar for MattEvans

It's not an incorrect use for a table; you want a row of columns of buttons - this is a tabular arrangement.

Tables are the only element that supports vertical alignment, which is why I suggest them. However; you might get something like what you want using a line of div elements, with CSS like:

div.align_center
{
    width:100px;
    height:100px;
    /* same as before; replace 100px with the maximum size of your image */
    float:left;
}
div.align_center img
{
   /* this selector will apply to any image inside a div of class align_center */
   margin: auto auto auto auto;
}

Effectively; you'll be doing the same thing (you have to put each image into a div with class align_center)
If you want them aligned to the center of that bottom frame; you'll have to put them into another div (with a defined width) and set that to have margin left, margin right as auto.

Up to you really. I don't think anyone could rightfully say you were lazy for using tables for this. I think frames are lazier than tables =P

BUT I don't mind frames. They fulfil a purpose; if you need that purpose, it's not lazy to use something pre-existing.

Member Avatar for Racoon200

could you guyz help me with the physics ball script i requested? (click on my username)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.