Question

I have been trying to make it work for a few hours, i tried a couple of solutions provided here at stackoverflow but still cant manage my content less a tag to work.

Here is my html code

<div class="productItem">
                <a class="imageContainer" style="background-image: url('<?php echo base_url() ?>images/product/thumbs/<?php echo $aProduct->filename ?>')">
                  Product Image
                </a>      
                <h4>
                    <a href="<?php echo site_url('home/product/' . $aProduct->product_id) ?>">
                        <?php echo $aProduct->product_name ?>
                    </a>
                </h4>
                <h3 class="productPrice"><?php echo $aProduct->price ?></h3>
                <span class="productItemRating">5</span>
                <a href="<?php echo $aProduct->product_id ?>" class="product-more">Buy</a>
            </div>

The problem is in the first a tag, the tag doesnt have a content.
I am giving the image as background instead of an image tag bcz someone suggested that it is faster

The CSS for the imageContainer a tag –

a.imageContainer{    
    display:block; 
    background-image: url('../images/product/thumbs/1358600020ca3.jpg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 5px;
    background-color: white;
    float: left;
    width: 160px;
    text-indent:-9999px; 
    height: 165px;    
}

a.imageContainer:hover{    
    cursor: pointer;
}

It is supposed to work according to the other answers, i guess i am missing something so i have no choice but to ask.

live example-

http://www.safaapps.com/home/category/7

you wont be able to click on item Galaxy Y image.

Answer 1

Weirdly enough, if you remove the opacity rule, it’ll fix it… don’t ask me why!

.productItem h4 {
    color: black;
    font-family: sans-serif;
    font-size: 16px;
    font-style: normal;
    margin: 3px 0;
    opacity: 0.95;
    text-align: left;
}

.productItem h3, h4 {
    color: white;
    font-family: sans-serif;
    font-size: 20px;
    margin: 0;
    opacity: 0.95;
    text-align: right;
    width: 100%;
}

---

The above solution works… but makes no sense. This however, makes a little more sense:

There is no need to float the .imageContainer. This was causing a weird side-effect: the <h4> next to it, somehow, was stretched on top of it (it’s like the h4 was a blanket on top of the .imageContainer). When you where hovering over the .imageContainer, you were really hovering over the h4, that’s why your :hover style wouldn’t get triggered.

Not sure why you had the opacity in the first place, but you can keep it. Just remove the float below.

a.imageContainer {
    background-color: white;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    float: left;
    height: 165px;
    margin: 5px;
    text-indent: -9999px;
    width: 160px;
}