Replace an image with a div on hover

Question

Seems fairly simple, but I can't get it to work.

The div contains facebook / twitter links. The way it should work is that the image is displayed and then when someone hovers on it, it disappears to be replaced by the social icons.

I've got the code to work with text in the div, but as soon as I add images / scripts, it seems to break. (The code I've got doesn't have the image disappearing either, that is something I haven't figured out how to do).

Here's what I've got:

<div class="image">
<img src="/some_image.jpg">

<div class="sharerDiv">
<p>Hello!</p>
</div>
</div>

With the following css:

.sharerDiv {
display:none;
}
img:hover + .sharerDiv {
display:block;
}

Here it is on jsfiddle: http://jsfiddle.net/randomlysid/dxwma/1/

I would like ot do this with css if possible, since that's what I'm familiar with, but if jQuery is the only way to get it done, that works as well.

Thanks!

Hey, I think I wasn't clear. >> 1. The image needs to disappear on hover. >> 2. The version with just 'hello' works already. it's the code marked 'case 1' (that's currently commented out) that doesn't work. — randomlysid, Jan 16 '13 at 14:18

Anthony Forloney · Answer 1 · 2013-01-16T14:33:08.443

3

You can apply a parent container and add pseudo selector :hover to modify it's children like so,

HTML

<div id="social">
  <div class="image">
    <img src="http://lorempixum.com/80/80" />
        <div class="sharerDiv">
        <p>Hello!</p>
        </div>
  </div>
</div>

CSS

#social {
  width: 100px;
  height: 200px;
}

#social:hover img {
  display: none;
}

#social:hover .sharerDiv {
  display: block;
}

Now when you hover over the div#social it will remove the img from view and display only the text.

Update

I had applied the same type of parent element to your Case 1 with the same CSS below and it appears to work as expected. Here is my jsfiddle: http://jsfiddle.net/dxwma/18/

edited Jan 16 '13 at 14:33

answered Jan 16 '13 at 14:18

Anthony Forloney

90,123
14
117
115

Thanks for the help! I think I wasn't too clear in writing my post earlier. Here's the problem Im facing: 1. I need the image to disappear completely on hover. 2. The code seems to work fine with just text in the div, as soon as I try to put the twitter / fb buttons, the code breaks. This is what I've tried to show by having case 1 and case 2 in my jsfiddle. – randomlysid Jan 16 '13 at 14:23
@user589578 When using your Case 1 with a parent `div#social` element along with my above CSS, it seems to work as intended. – Anthony Forloney Jan 16 '13 at 14:30
Hey, This seems to work! Thanks. I'm currently getting a lot of flickering in the image right now though. Any idea why that might be? – randomlysid Jan 16 '13 at 14:39
@user589578 I wasn't seeing any noticeable flickering, when does this occur, over the hover or elsewhere? – Anthony Forloney Jan 16 '13 at 14:40
@user589578 Also as you progress through SO when you find answers which resolve your question, it's good to mark them as answered to help other people experiencing similar issues identify which solution resolved the issue. – Anthony Forloney Jan 16 '13 at 17:32
Yes... you're right, I've marked yours right now. The flickering appears over the image when the hover effect comes into play. – randomlysid Jan 16 '13 at 18:12

Onur Yıldırım · Accepted Answer · 2013-01-16T14:53:11.663

1

Change your CSS to this:

.image
{
  width: 80px;
  height: 80px;
}
.sharerDiv
{
  display: none;
  position: absolute;
  z-index: 99;
}
img
{
  position: relative;
  display: block;
}
.image:hover .sharerDiv
{
  display: block;
}
.image:hover img
{
  display: none;
}

Your outer container .image should better have the same bounds (width and height).
The position value of .sharerDiv should be absolute (so it can float).
hover should be applied to the outer container.

Here is an edited fork of your code on jsFiddle.

edited Jan 16 '13 at 14:53

answered Jan 16 '13 at 14:43

Onur Yıldırım

32,327
12
84
98

Thanks! Your code worked too. Have marked it right. I'm still learning the ropes of SO, so apologies if I didn't get this right sooner. – randomlysid Jan 16 '13 at 18:14

seyed · Answer 3 · 2013-01-16T14:36:10.183

0

you must add negative margin. and some other div. for example change your code to:

html:

<div class="image">
  <div class="image-container">
    <img src="http://lorempixum.com/80/80">
  </div>
  <div class="sharerDiv">
  <p>Hello!</p>

    </div>

</div>

css:

.sharerDiv{
  display:none;
}
.image-container{
  width: 80px;
  height: 80px;
}
.image-container:hover + .sharerDiv{
  display:block;
  margin-top: -49px;
}
.image-container:hover img{
  visibility: hidden;
}

edited Jan 16 '13 at 14:36

answered Jan 16 '13 at 14:11

seyed

1,555
1
17
24

Thanks for the help! I'm trying to make the image disappear completely on hover and get replaced with the code in the jsfiddle, the twitter / facebook buttons. – randomlysid Jan 16 '13 at 14:25

Replace an image with a div on hover

3 Answers3