CODEWITHSUNDEEP
htmlcsshyperlinkhover
number8pie
number8pie

Reputation: 147

a:hover image overflow issue

I'm creating a hover effect so that when someone mouse-over's on an image scan lines appear, but can't get the damn overlay image to be the same size as the image.

Take a look at this fiddle: http://jsfiddle.net/number8pie/wwmPL/

Here's the HTML:

<div class="container">
 <a href="#">
  <div class="overlay"></div>        
  <img src="http://www.mainlymunros.co.uk/images/green%20square.bmp" repeat>
 </a>
</div>

Here's the CSS:

.container {
  position: relative;
  max-width: 200px;
}
img {
  width: 100%;
  position: relative;
  z-index: 1;
  padding: 7px;
  border: 1px solid #333;
}
.overlay {
  display: none;
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 8px;
  background: url(https://dl.dropbox.com/u/29825082/scanlines.png) repeat;
}

a:hover .overlay {
  display: block;
}

If you hover over the green block you can see the scan lines overlap at the bottom, I want to remove this overlap.

The image is dynamic and changes size depending on the size of the browser size.

Anyone got any suggestions?

Upvotes: 0

Views: 204

Answers (2)

James Donnelly
James Donnelly

Reputation: 128791

The problem is that you're giving it 100% height and 100% width but then you're giving it margin. You're telling it to be the exact size of it's containing a element, but then pushing it down a bit.

You need to add an extra container, remove the image's padding and border and assign that to the new container.

<a href="#">
    <div class="image">
        <div class="overlay"></div>        
        <img src="http://www.mainlymunros.co.uk/images/green%20square.bmp"/>
    </div>
</a>

.container a { 
    display:block;
    padding:7px;
    border: 1px solid #333;
}
.image {
    position:relative;
    width:100%;
    height:100%;
    display:block;
}
img {
    width: 100%;
    position: relative;
    z-index: 1;
}
.overlay {
    display: none;
    position:absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    background: url(https://dl.dropbox.com/u/29825082/scanlines.png) repeat;
}

Example: JSFiddle.

Your problem now is that your img isn't square. Being a rectangular image with greater width than height means it will fill 100% width but cut off part of the height. Make your image a square or give your overlay the same aspect ratio and this will work perfectly.

Upvotes: 1

MarmiK
MarmiK

Reputation: 5775

its padding property which creates overflow. so change the height of both image and .overlay

that will do.

 fiddle :http://jsfiddle.net/wwmPL/2/

i hope this that solves your problem :)

Upvotes: 0

Related Questions