jQuery Masonry and CSS3

我如何维持砌体布局，但涉及CSS3过渡与当前的图像?

我的html

<body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="masonry.js"></script>
<script>
$(function () {
      $('#container').masonry({
          columnWidth: 1,
          itemSelector: 'div'
      });
});
</script>

<div id="imagetrans">
  <img class="bottom" src="images/eventbox2.png" />
  <img class="top" src="images/eventbox.png" />
</div>

<div id="logo">
</div>
<div id="container" class="clearfix masonry">
<div class="item1"><img src="images/eventbox.png"></img></div>
<div class="item4"><img src="images/forumbox.png"></img></div>
<div class="item2"><img src="images/weekbox.png"></img></div>
<div class="item2"><img src="images/weekbox.png"></img></div>
<div class="item2"><img src="images/weekbox.png"></img></div>
<div class="item2"><img src="images/weekbox.png"></img></div>
<div class="item3"><img src="images/top10box.png"></img></div>
<div class="item1"><img src="images/eventbox.png"></img></div>
</div>

</body>

和CSS

html {
  height:100%;
}
body {
  width:900px;
  height:100%;
  margin:0 auto;
  margin-top:100px;
  background-image: url(images/gridbg.png);
}
#logo {
}

#container > div {
    margin: 5px;

#imagetrans {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}
#imagetrans img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
#imagetrans img.top:hover {
  opacity:0;
}

我已经设法分开做，虽然不能弄清楚我将如何去把它们连接在一起，以便在砖石中使用的图像将过渡时悬停-对不起，如果这不能做到，我仍然新的所有这一切。

任何想法?

给你:http://jsbin.com/ifequp/2

使用演示程序右上角的编辑按钮查看代码。

jQuery砌筑不会干扰你的悬停不透明度技术，所以任务是简单地把一个放到另一个。

下次你寻求帮助时，请在http://jsbin.com上发布你的HTML/CSS/JS。不要粘贴你的整个网站，只粘贴你有问题的部分。

PS我发现1s跃迁太令人不安了。考虑将时间降低到0.3s左右。

相关内容

最新更新

热门标签：