How to change element at the page on hover?

Question

I have a page with 2 columns. Left column is a picture.

<div class="col-md-3">
    <br>
    <img src="http://placehold.it/350X350" class="img-responsive">
</div>
<div class="col-md-3">
    <br>Lorem ipsum dolor sit amet..
</div>

I want to situate table behind the picture and I need to make it visible only when someone places a mouse over a table's area. At default I want to place image and to place table (see below) on hover:

<div class="col-md-3">
    <br>
    <table class="table">
        <caption>Basic Table Layout</caption>
        <thead>
            <tr>
                <th>Name</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tanmay</td>
                <td>Bangalore</td>
            </tr>
            <tr>
                <td>Sachin</td>
                <td>Mumbai</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="col-md-3">
    <br>Lorem ipsum dolor sit amet..</div>

So, on hover: http://www.bootply.com/FmxIhVK0Pq by default: http://www.bootply.com/jS76schLTB

Yes, exactly. When someone navigate to image it is invisible and table will appear instead of it. — , Oct 27 '14 at 13:11
It's going to get weird when the image's area is too small for the table. Things will be jumping around on your page. — isherwood, Oct 27 '14 at 13:16
It's small table. And I'll have image the same size at the main screen. I'm not sure it'll convert them in the same way for different resolutions. — , Oct 27 '14 at 13:20
Also consider how this will work on touch devices (potentially half your users, or more). — isherwood, Oct 27 '14 at 14:14

hahaha · Accepted Answer · 2014-10-27T14:06:29.797

5

I would absolute position the image and do opacity: 0; on hover example here

.the_image{
  position:absolute;
  top:0;left:0px;
}
.the_image:hover {
    opacity: 0;
}

Absolute position will allow the table to be underneath the image. So it wont show both.

.the_image{
  position:absolute;
  top:0;left:0px;
}
.the_image:hover {
    opacity: 0;
}

<table class="table"> <caption>Basic Table Layout</caption> <thead> <tr> <th>Name</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td>
</tr> </tbody> </table>

<img src="http://placehold.it/350X350" class="the_image">

Another solution would be to have the table display:none; by default, and when you hover the image, to change it to display:block; and also change the image back to display:none;

Edit: Removed code for the SECOND solution because it flickered the image, if the idea is possible then someone with more CSS knowledge than me could add the code :) (see nepeo's comment below!)

First solution works!

edited Oct 27 '14 at 14:06

answered Oct 27 '14 at 13:18

hahaha

1,001
1
16
32

Could you provide a demo? I see the oddness I mentioned in the comment above. http://jsfiddle.net/isherwood/er811qbq/2/ – isherwood Oct 27 '14 at 13:33
yes give me a minute the code was more of a guidance than a solution :) – hahaha Oct 27 '14 at 13:33
found a solution for the first example, instead of `display:none;` you change the opacity, changed the answer – hahaha Oct 27 '14 at 13:38
forgot to @isherwood you :D – hahaha Oct 27 '14 at 13:48
I think using display none would clash with on hover, because once it vanishes it swaps to false... hence the flashing – nepeo Oct 27 '14 at 13:58
@nepeo seems to be the case, perhaps only with javascript? – hahaha Oct 27 '14 at 13:59
@Alexandros nah i've seen a similar issue with vanilla before, its part of the CSS implementation. Best to stick with opacity or visibility properties like your first answer because the element still exists in a way. The alternative is have a toggle using the js onmousemove and a timeout for deselect... but CSS only is better. – nepeo Oct 27 '14 at 14:03
@nepeo thanks, I learned something as well, appreciate the input :D – hahaha Oct 27 '14 at 14:07
1

@Alexandros thats alright, here to help after all! :) Plus point for using opacity is that it's animatable as well. `-webkit-transition: all 0.5s;` – nepeo Oct 27 '14 at 14:11
Yes, it works. Thanks, Alexandros. You have completely cleared this task which was so difficult for me. – Oct 27 '14 at 14:15

score 0 · Answer 2 · answered Oct 27 '14 at 13:15

I am not sure if I got it right. But if I did maybe the best way is to use css selectors. so for example , You give them both absolute position or something like that so that table is behind picture (z-index smaller than table). and use pseudoselector like img:hover { display: none;} or even better img:hover { opacity: 0;}, whit this one you can use css transitions, also add smaller z-index than image so user can select things in table

How to change element at the page on hover?

2 Answers2