CODEWITHSUNDEEP
htmlcss
Clive van Hilten
Clive van Hilten

Reputation: 881

Image row sizing

I'm struggling to get a row containing three images to be sized correctly. The three images are equally sized (270px x 270px) and share a common background image (a shadow) which is sized 310px x 310px and is rendered when the mouse is hovered over any of the three images. jsFiddle here: jsFiddle

I have tried inserting style="height:310px;" into the td tag, the tr tag and into the .center CSS, neither of which sizes the row correctly - the top and botom of the background shadow image are cut off.

Does anyone have a pointer for me? Thank you.

CSS:

.center {
text-align: center;
}

#images:hover {
background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
background-repeat: no-repeat;
background-position:center;     
}

HTML:

<table style="width: 100%">
    <tr>
            <td class="center">
                <div id="images">
                <object class="images" type="image/svg+xml"
                    data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
                    <img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
                </object>
                </div>
            </td>
            <td class="center">
                <div id="images">
                <object type="image/svg+xml"
                    data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
                    <img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
                </object>
                </div>
            </td>
            <td class="center">
                <div id="images">
                <object type="image/svg+xml"
                    data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
                    <img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
                </object>
                </div>
            </td>
    </tr>
</table>

Upvotes: 1

Views: 82

Answers (4)

Adil Shaikh
Adil Shaikh

Reputation: 44740

DEMO

Your images do not have enough space around them to show shadow properly. You can just add more space by adding some padding in your image div

#images{
    padding:20px;
}

Upvotes: 3

Chamara Keragala
Chamara Keragala

Reputation: 5777

Try this -

#images{ padding:15px; }

Works perfect!

Upvotes: 0

Manish Mishra
Manish Mishra

Reputation: 12375

Just give proper padding to your divs containing images

update your #images css to this:

#images
{
    padding:20px;
}
#images:hover {
    background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
    background-repeat: no-repeat;
    background-position:center;     
    padding:20px;
}

see this fiddle

Upvotes: 2

Four_lo
Four_lo

Reputation: 1150

Have you tried styling a 

    table td.center {
        attributes
    }

in CSS

Upvotes: 0

Related Questions