Господа прошу вашей помощи!
необходимо соединить два эффекта:
<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>
сколько не соединял, все время что нибудь пропадает, либо не затемняется! Рассчитываю на вас!
