CODEWITHSUNDEEP
htmlcssimagehover
user2744278
user2744278

Reputation: 21

Hover image enlarge using css, in front of other images

I have a table with images and have set up some css to enlarge the images and display text on hover. I'm having trouble with the images enlarging in back of the other images. I need the hover enlarged image to be in front of the rest.

Here's the Fiddle - http://jsfiddle.net/eF5CX/

HTML:

<table width="522" border="0" align="center" cellpadding="0" cellspacing="3">
      <tr>
        <td width="179"><div class="imageWrapper1"><a href="http://cloverparklakes6450.com/events_cocktails.php"><img src="http://cloverparklakes6450.com/images/cocktails.jpg" name="cocktails" width="179" height="265" border="0" align="top" id="cocktails" /></a><a href="http://cloverparklakes6450.com/events_cocktails.php" class="cornerLink">August 22 Friday Night Cocktails at Oakbrook CC</a></div></td>
        <td colspan="2" rowspan="2"><div class="imageWrapper1"><a href="events_gala.php"><img src="http://cloverparklakes6450.com/images/gala.jpg" name="gala" width="331" height="397" border="0" align="top" id="gala" /></a><a href="http://cloverparklakes6450.com/events_gala.php" class="cornerLink">8/23 Saturday Night Gala</a></div></td>
        <td width="1">&nbsp;</td>
      </tr>
      <tr>
        <td height="129"><div class="imageWrapper1"><a href="events_golf.php"><img src="http://cloverparklakes6450.com/images/golf.jpg" name="golf" width="179" height="129" border="0" align="top" id="golf" /></a><a href="http://cloverparklakes6450.com/events_golf.php" class="cornerLink">8/23 Golf Tournament</a></div></td>
        <td>&nbsp;</td>
      </tr>
    </table>
    <table width="518" border="0" align="center" cellpadding="0" cellspacing="1">
      <tr>
        <td width="293"><div class="imageWrapper1"><a href="http://cloverparklakes6450.com/events_picnic.php"><img src="http://cloverparklakes6450.com/images/picnic.jpg" name="picnic" width="286" height="214" border="0" align="top" id="picnic" /></a><a href="http://cloverparklakes6450.com/events_picnic.php" class="cornerLink">8/24 Beach Picnic</a></div></td>
        <td width="222"><div class="imageWrapper1"><a href="http://cloverparklakes6450.com/events_car.php"><img src="http://cloverparklakes6450.com/images/car.jpg" alt="" name="car" width="220" height="214" border="0" align="top" id="car" /></a><a href="http://cloverparklakes6450.com/events_car.php" class="cornerLink">8/24 Collector Car Cruise</a></div></td>
      </tr>
    </table>

CSS:

    .imageWrapper1:hover {
    cursor: pointer;
    height:auto;
    width: auto;
    transform:scale(1.1);
    -ms-transform:scale(1.1); /* IE 9 */
    -moz-transform:scale(1.1); /* Firefox */
    -webkit-transform:scale(1.1); /* Safari and Chrome */
    -o-transform:scale(1.1); /* Opera */
    box-shadow: 3px 3px 1px #111111;
}
.imageWrapper1 {
    position: relative;
    width: auto;
    height: auto;
}
.imageWrapper1 img {
    display: block;
}
.imageWrapper1 .cornerLink {
    opacity: 0;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 2px 0px;
    color: #ffffff;
    background: #000000;
    text-decoration: none;
    text-align: center;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;

}
.imageWrapper1:hover .cornerLink {
    opacity: 0.8;
}

Upvotes: 2

Views: 11041

Answers (2)

Swap
Swap

Reputation: 175

Just give an z-index to hover.
It will work.
Just like below;

.imageWrapper1:hover .cornerLink {
    opacity: 0.8;
    z-index:10;
}

Upvotes: 6

acid
acid

Reputation: 73

I would put a wrapper around the Image and scale this wrapper.

Like so: 

<table class="content">
<tr>
    <td>
        <div class="zoom-img">
            <img src="http://i.imgur.com/JABvKgL.jpg" />
        </div>
    </td>
    <td>
        <div class="zoom-img">
            <img src="http://i.imgur.com/JABvKgL.jpg" />
        </div>
    </td>
</tr>

I've set up a jsfiddle for you.

Upvotes: 0

Related Questions