1

I am trying to integrate a hover effect to an img in css but the problem occurs when I hover it, the hover area is misplaced and the the hover effect occur even when the mouse is not over the img.

<body>
<div id='backgroundContainer'>
    <div id='background31'></div>
</div>
</body>

CSS:

 html, body {
max-height:100%;
    width: 300%;
    background: url('background.png');
    top: 0;
    left: 0;
    background-size: cover;
    background-repeat:no-repeat;            
}
#backgroundContainer {
    top:0;
    left:0;
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}
#background31 {
    top:45%;
    position: absolute;
    margin:0;
    padding:0;
    background: url('alure.png');
    background-repeat:no-repeat;
    height:55%;
    width:70%;
    left:230%;
    background-size: 5%;
} 
#background31:hover{
    background-size: 7%;
}

I was thinking about using background-position:x% y% or margin-left to simplify the code but it did not work what I tried.

Koen Peters
  • 12,798
  • 6
  • 36
  • 59
Laur Stefan
  • 1,519
  • 5
  • 23
  • 50

4 Answers4

0

Try replacing this code

             #background31{

                         background: url(maxresdefault.jpg);
                         background-repeat:no-repeat;
                         height:50px;
                         width:100px;
                         background-color:#066;
                         background-size: 5%;
                         } 

            #background31:hover{
                         background-size: 100%;
                        }
leo
  • 8,106
  • 7
  • 48
  • 80
Dennis
  • 43
  • 8
0

because you have put the hover for the div the whole div , not just the image and this div background31 occupies the lower right corner square of your window .

see here : http://jsfiddle.net/Pda5e/

your image size becomes very small as compared to the div in which it is in. Since you have made it 5% of the div.

Resize the div to make it smaller and increase the background size to fill the div

so if you have to make the hover only affect the image, you must give the hover to image only.

like here : http://jsfiddle.net/Pda5e/1/

aelor
  • 10,892
  • 3
  • 32
  • 48
0

You are applying the hover effect on an div which is set to a large area (the area in red in my fiddle below). This is why the hover is activated even when the mouse is not over the image.

If you add an image to the nested div, and apply the hover effect to this image it should work. 

<div id='backgroundContainer'>
    <div id='background31'>
        <img src='http://www.sjiep.nl/images/sjiep.gif' id='testImage'>
    </div>

</div>

and the css 

#testImage{
    width: 100px
}
#testImage:hover{
    width: 150px;
}

See also: http://jsfiddle.net/2CbTX/1/

Update

Added a link to the image, see: http://jsfiddle.net/2CbTX/2/

Sjiep
  • 688
  • 5
  • 14
  • and if I want to add a link to the photo? – Laur Stefan Apr 08 '14 at 10:17
  • Surround the img tage in a link like so – Sjiep Apr 08 '14 at 10:27
  • By the way, it is fairly unconventional to have the page scroll horizontally. In your example it took me a moment to find out I had to scroll horizontally. – Sjiep Apr 08 '14 at 10:38
  • I will add a image so that the users know that they have to use the arrows of the keyboard – Laur Stefan Apr 08 '14 at 10:46
  • but what if I also want to add a hover effect that loads another img? – Laur Stefan Apr 11 '14 at 09:42
  • You mean that when you hover over an image a different image is loaded under the hover? In that case you can't use a img tag any more and would have to use a div, see also http://stackoverflow.com/questions/2676436/define-an-imgs-src-attribute-in-css. In the hover selector you would change the background-image, I guess that should work. – Sjiep Apr 11 '14 at 11:20
0

The hover effect occurs not over the image because you only change background-size, but not the size of #background31 element, it always remains width:70%.

So you should use background-size: 100% and change the width of the background31 element.

#background31 {
    background-size: 100%;
    width: 5%
} 
#background31:hover{
    width: 2%;
}

But background-size is not supported in IE8. If you want IE8 suuport than use <img> element instead of a div.

felicete
  • 63
  • 4