Javascript-форум - совместить 2 скрипта

Господа прошу вашей помощи!
необходимо соединить два эффекта:

<div class="homebox random" style="visibility: visible; ">
<a href="#">
<img src="images/home_mykita-1.jpg" alt="alt">
<span class="name">Mykita - New Season</span>
<span class="desc" style="width:160px">New and restocked Mykitas, including the ever-popular Bernhard Willhelm collaboration... </span>
<span class="back"></span></a>
</div>

<div class="viewport"><a href=#><span class="dark-background"><em></em></span><img src="images/home_mykita-1.jpg" alt="alt">
</a></div>

CSS:

/* homebox */	
	.homebox {float:left; margin:20px 0 0 20px; width:293px; height:147px; overflow:hidden; position:relative; cursor:pointer }
	.homebox span.back {display:none; z-index:1; position:absolute; left:0px; top:0px; width:293px; height:147px; background:url(/content/ebiz/okini/resources/images/bg_homebox.png) top left no-repeat; cursor:pointer }
	.homebox:hover span.back { display:block; cursor:pointer }
	.homebox span.name {position:absolute; left:10px; top:10px; background:#fff; color:#222; font-size:12px; padding:2px 10px; text-transform:uppercase; cursor:pointer }
	.homebox span.desc {position:absolute; left:10px; top:35px; color:#fff; font-size:11px; padding:2px 0; display:none; z-index:999; line-height:15px; cursor:pointer}
	.homebox:hover span.name {background:#000; color:#fff; z-index:9; cursor:pointer}
	.homebox:hover span.desc {display:block; text-decoration:none; max-width:200px; z-index:9; cursor:pointer}

		        .dark-background {
            background-color: rgba(15, 15, 15, 0.6);
            color: #fff;
            text-shadow: #000 0px 0px 20px;
        }
            .dark-background em {
                color: #ccc;
            }
             .viewport {
            border: 3px solid #eee;
            float: left;
            height: 149px;
            margin: 0 9px 9px 0;
            overflow: hidden;
            position: relative;
            width: 293px;
            }
            
              .viewport a span {
            display: none;
            font-size: 3.0em;
            font-weight: bold;
            height: 100%;
            padding-top: 120px;
            position: absolute;
            text-align: center;
            text-decoration: none;
            width: 100%;
            z-index: 100;
            }
            
            .viewport a span em {
                display: block;
                font-size: 0.45em;
                font-weight: normal;

скрипт:

<script type="text/javascript"> 
    $(document).ready(function() {
        $('.viewport').mouseenter(function(e) {
            $(this).children('a').children('span').fadeIn(200);
        }).mouseleave(function(e) {
            $(this).children('a').children('span').fadeOut(200);
        });
    });
    </script>

сколько не соединял, все время что нибудь пропадает, либо не затемняется! Рассчитываю на вас!