Question

I am working with some html tables inside of html tables and I am having trouble doing some specific styling. Here is my table: enter image description here

Note: The blue part is the hover.

The specific things I want to do are:

1. Make the image in each cell fill the entire cell (instead of having that much blue space)
2. Make the image enlarge when you hover on the image.
3. Make the right section (with the info and buy button) have a light grey background.

Here is my fiddle.

(the fiddle made my output looked stretched and Im not sure why)

Was it helpful?

Solution

1 . change the padding of the .table td

2 . Something with img:hover, maybe this:

img:hover {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

But there you have to leave the browser window to get the old size...

3 . <td bgcolor=gray>

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top