What is the best way to toggle the visibilty of an image without "pushing" other elements over?

Question

I have a web page that has an image inside of a table cell that I only want to show when you hover over a cell.

The issue I have is that it "pushes" the other text to the left when the image is shown (because the default state is display:none"). I am looking for a solution that does

In a table cell, i have an image that is on the top right using this code:

 <td class="tableCell">
        <span class="cellMenu">
           <img src="/Icons/arrow_down.png" class="seatMenuArrow">
        </span>
        A bunch of other text that is all center aligned
 </td>

Here is the css that makes the cellMenu image top right.

.cellMenu
{
    display:none;
    float:right;
    cursor: pointer;
}

and I am doing this to show the instrument only when you hover over the cell.

$('.tableCell').live('hover', function () {
      $(this).toggleClass("hover").find(".cellMenu").toggle();
});

This works but when the images is shown the "A bunch of other text that is all center aligned" moves over. What is the correct way to avoid having this move over so the image is just shown and nothing else moves?

use `visibility:hidden`, it will still take up the space but not show — caffeinated.tech, Oct 10 '14 at 13:58
Look at this question : http://stackoverflow.com/questions/9614622/equivalent-of-jquery-hide-to-set-visibility-hidden — xlecoustillier, Oct 10 '14 at 14:03

Rvervuurt · Accepted Answer · 2014-10-10T14:10:05.937

1

Do it without jQuery:

.cellMenu img
  {
    opacity:0;
    float:right;
    cursor: pointer;
  }

.cellMenu:hover img
  {
     opacity: 1;
  }

Added a JSfiddle

edited Oct 10 '14 at 14:10

answered Oct 10 '14 at 14:00

Rvervuurt

8,589
8
39
62

I want to show the image not when I hover over the image but rather when i hover over the tablecell . . – leora Oct 10 '14 at 14:01
Take a look at my edit. When you hover over the `.cellMenu`, it changes the opacity of the `img` stored within. – Rvervuurt Oct 10 '14 at 14:04
Check out the JSfiddle to see if it has the result you want :) – Rvervuurt Oct 10 '14 at 14:10
is this css supported on all browsers? – leora Oct 10 '14 at 16:21

What is the best way to toggle the visibilty of an image without "pushing" other elements over?

1 Answers1