fancybox animation

HTML

<script src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css">
<div class="portfolio_item">
    <a href="http://www.novicadjukic.com/wp-content/uploads/2015/02/ThemezKitchen-1.jpg"><img src="http://www.novicadjukic.com/wp-content/uploads/2015/02/ThemezKitchen-1.jpg" alt="#" /></a>
    <span class="portfolio_title">text</span>
    <span class="portfolio_subtitle">more text</span>
</div>

CSS

.portfolio_thumb { position: absolute; }
.portfolio_item { width: 205px; float: left; margin-bottom: 20px;  }
.portfolio_title { font-family: Governor, helvetica, arial, sans-serif; text-align: center; display: block; margin: 3px 0;}
.portfolio_subtitle { font-family: NovecentowideBook, helvetica, arial, sans-serif; text-align: center; display: block;  }
.portfolio_item  { background: gray; font-family: NovecentowideDemiBold, impact, arial, sans-serif; font-size: 1.2em; text-align: center; display: block; padding: 95px 0 85px; cursor: pointer; }

JavaScript

$(".portfolio_item > a").fancybox();
        
        $(".portfolio_item > a img").hover(
            function() {
                $(this).stop().animate({"opacity": "0"}, "slow");
            },
            function() {
                $(this).stop().animate({"opacity": "1"}, "slow");
            });