How do I make an image in a table hover light pink when hovered over?

Question

I can't believe how difficult and tedious this has been. Nothing I have tried has worked thus far. I have the table shown below where the images are coming from a database. All I want to do is to put a see-through pink layer on top of them when they are hovered over. What are some ways that some of you have done this? Here (digrepro.com/home -- then just hover over any of the images) you can see how I did this already with a different page, but I can't for the life of me get it to work with the code below.

<table bgcolor="#FFCCFF" cellpadding="0" cellspacing="0" style="margin-top:75px;">
<tr>
<?php $sql_endRow = 0;
$sql_columns = 10;
$sql_hloopRow1 = 0;
foreach ($products as $product) {
    if($sql_endRow == 0  && $sql_hloopRow1++ != 0) { ?>
        <tr>
    <?php } ?>                
    <td>
        <a href="javascript:void(0)" onClick="get_product_id(<?php echo $product['product_id']; ?>)"><img src="<?php echo base_url(); ?>products/<?php echo $product['product_thumbnail']; ?>" border="0" width="23px" style="margin:4px 2px 0px 2px;" /></a>
        </td>
    <?php $sql_endRow++;
        if($sql_endRow >= $sql_columns) { ?>
            </tr>
            <?php $sql_endRow = 0;
        }
}
if($sql_endRow != 0) {
    while ($sql_endRow < $sql_columns) { ?>
        <td>&nbsp;</td>
    <?php $sql_endRow++;
    } ?>
    </tr>
<?php }?>
</table>

score 2 · Answer 1 · answered Feb 09 '12 at 17:40

One way to achieve the semi-trans color overlay style effect is to set the background of the containing element to the desired color [make sure this element has padding: 0 otherwise it will leak round the image] then on hover make the opacity of the image something like 0.5.

td {
background-color: pink;
}

img:hover {
opacity: 0.5;
}

[I think opacity is not fully supported in old IE and you might want to use css transitions or jquery fade to make it nice]

score 0 · Answer 2 · answered Feb 09 '12 at 17:39

0

I would create a div, position it absolutely over the image, color it pink and use the CSS opacity setting. I can elaborate if you need me to.

answered Feb 09 '12 at 17:39

Curt Hostetter

11
3

score 0 · Answer 3 · answered Feb 09 '12 at 17:41

since it's coming from the database, you have to be more careful selecting it.

the new "on()" function handles it well. it'll look something like this. make sure to give a "class='table'" to your table so you can select it.

$(document).on('hover', '.table', changecolor);

function changecolor() { write-your-code-here });

score 0 · Accepted Answer · answered Feb 09 '12 at 17:41

0

No need to inject more HTML elements, just give the TDs a background-color:pink; and set the images to img:hover{ opacity:.5; }.

answered Feb 09 '12 at 17:41

Timothy Aaron

3,059
19
22

I used this fix (I like short code LOL), but it also changed the background of the table. Is there any easy way around that? – WebDev84 Feb 10 '12 at 17:38

score 0 · Answer 5 · answered Feb 09 '12 at 17:41

You can do this (not tested):

var $overlay = $('<div />').addClass('pink-overlay').hide();

$('img.with-overlay').each(function() {
  $(this).wrap($('<div />').addClass('img-wrapper'));
  $(this).parent().append($overlay);
}).on('hover', function() {
  $('.pink-overlay', this).stop(true).fadeIn();
}, function() {
  $('.pink-overlay', this).stop(true).fadeOut();
});

CSS:

.pink-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  opacity: 0.5;
  background: pink;
}

.img-wrapper {
  position: relative;
}

score 0 · Answer 6 · answered Feb 09 '12 at 17:42

You can use an absolutely positioned div with the opacity set to achieve the transparency you want and display:none then on hover change the display setting for the div.

Another option is to use a background image on a div. Using an image sprite that would have both versions of the image(regular and pink) you can then simply move the background position on hover.

score 0 · Answer 7 · edited May 23 '17 at 10:34

You could try setting the transparency of the image to allow the background to seep through. Here's an answer on how to do that: jquery.

Alternatively, you can use the a:hover css styling to swap out the normal clear image for a slight pink one. This would require you to have the pink images premade and hosted somewhere.

Like this: `

<style type="text/css">
.links {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    display:block; /*This Cover Full TD */
    background:url(link.png) center top no-repeat; /*This Will Set the Link background */
    height:25px; /*This Will Make Fixes Size Link (Use Image height)*/
    width:100px; /*This Will Make Fixes Size Link (Use Image width)*/
    line-height:25px;
    text-align:center;
    font-size:10pt;
    text-decoration:none;
}
.links:hover {
    background:url(hover-link.png) center top no-repeat;
}
</style>
`

score 0 · Answer 8 · answered Feb 09 '12 at 17:55

0

here you have it with an animation:

$('yourElement').hover(function(){
    $(this).stop().animate({backgroundColor: 'transparent',"opacity": 0.5});
},function(){
    $(this).stop().animate({backgroundColor: '#FFC0CB',"opacity": 1});
});

good luck

answered Feb 09 '12 at 17:55

MCSI

2,818
26
35

How do I make an image in a table hover light pink when hovered over?

8 Answers8