2

我如何保持砖石布局，但在当前图像中加入 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;
}

我已经设法分别做这两个，虽然我不知道我将如何将它们连接在一起，以便在砌体中使用的图像在悬停时会转换 - 抱歉，如果不能做到这一点，我对所有人来说还是新手这。

有任何想法吗？

4

1 回答 1

2

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

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

jQuery Masonry 不会干扰您的悬停不透明度技术，因此任务是简单地将一个放入另一个中。

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

PS 我觉得 1s 的过渡太令人不安了。考虑将时间降低到 0.3s 左右。

于 2013-03-31T19:36:28.597 回答