CODEWITHSUNDEEP
css
Curia
Curia

Reputation: 63

Image coloured hover over overflowing

Just a simple image that uses some jQuery to fade some content over the top when moused over. Only problem is that when the hover over takes effect, the hover spills into the div gutter making the hover over bigger than the actual container.

each image is layed out like so 

<li class="large-4 columns item">
<div class="description"><h1>Image hover</h1><a href="#"></a></div>
<img class="display" src="http://placehold.it/400x300">
</li>

Can see a live example here. http://jsfiddle.net/QLUMH/

Any ideas on ways to fix/improve what I am doing here? Cheers

Upvotes: 1

Views: 169

Answers (5)

MarmiK
MarmiK

Reputation: 5775

Change in CSs will help,

I have updated the same in fiddle

with change in CSS,

#portfolio .description {
    position: absolute;
    background: rgba(0,199,134,0.8);
    display: none;
    width: 400px;
    height: 300px;
}

#portfolio .description h1 {
    color: white;
    opacity: 1;
    font-size: 1.4em;
    text-transform: uppercase;
    text-align: center;
    margin-top: 20%;
width:400px;
height:300px;
overflow:hidden;
}

Update:

If the H1 created extra cutter and wrapping issue(for some), please use the DIV tag instead, which should work fine!

I hope this will solve your problem :)

Upvotes: 0

xpy
xpy

Reputation: 5621

You'll just have to get rid of the padding on tne li

li{ padding:0 }

or use the the box-sizing property:

`li { box-sizing:border-box; -moz-box-sizing:border-box; }

Upvotes: 0

PatrikAkerstrand
PatrikAkerstrand

Reputation: 45721

The issue is that your description fills the entire column, which is wider than your image. If you add an "inner column"/container that collapse to the same width as your image, it will work alright. I've created a fork of your demo that demonstrates this.

I've added a wrapper "ib" (Just stands for inner block. rename this to a proper name) inside each .column.item like so:

<div class="ib">
    <div class="description">
       <h1>Image hover</h1><a href="#"></a>
    </div>
    <img class="display" src="http://placehold.it/400x300">
</div>

And then just created a very simple CSS rule for making this wrapper collapse to its contents:

.ib {
    display: inline-block;
    position: relative;
}

Upvotes: 1

Jehanzeb.Malik
Jehanzeb.Malik

Reputation: 3390

You did not style your li. The issue is that in foundation.css it is getting padding-left and padding-right. You need to remove that and use margin-left and margin-right instead. And you also need to fix the width of the li. As .description will get its 100% height. So you need to include a small css in your own file (don not modify foundation.css).

#portfolio li.columns{
    /* You can use the width in '%' if you want to make the design fluid */
    width: 400px;
    padding: 0px;
    margin: 0px 0.9375em;
}

Fiddle

Upvotes: 0

Manoz
Manoz

Reputation: 6587

Demo

Here you have live example, you are giving 100% to width and height. so that really goes overflow.

Code edited-

#portfolio .description {
        position: absolute;
        background: rgba(0,199,134,0.8);
        display: none;
        width: 400px;
        height: 300px;
    }

Upvotes: 2

Related Questions