Question

        <ul class="top">
            <li>
                <span class="card flipped">
                    <span class="front face">
                        <a href="<?php echo site_url("about") ?>" class="link">
                            <img src="<?php echo base_url();?>img/about.jpg" alt="" />
                            <div class="overlay"><p>ABOUT<br/>US</p></div>
                        </a>
                    </span>
                    <span class="back"></span>
                </span>
            </li></ul>


<script  type="text/javascript">
$(document).ready(function() {
//On mouse over those thumbnail
$('.card').hover(function() {
//Display the caption
$(this).find('.overlay').stop(false,true).fadeIn(400);
},
function() {
    //Hide the caption
    $(this).find('.overlay').stop(false,true).fadeOut(800);
});

});
</script>

iv got a few of these cards with some jquery to show the overlay works in all browsers iv tested except crome.
site is at
http://gurtyboardingcompany.com.au/ if that helps.

Answer 1

It isnt the jQuery that is broken in Chrome, but your CSS styling.

The link which wraps the image and overlay is absolutely positions and appears above the overlay and text.

If you change the overlay to be positioned absolutely, then give it a higher z-index than the link, it should work.

Edit

If you inspect the DOM with Chrome, you can see that the opacity value is being set during fadeIn/fadeOut. So I would fix the styling issues.