jQuery和CSS3_Jquery_Css_Css Transitions_Jquery Masonry

jQuery和CSS3

jquery css

jQuery和CSS3,jquery,css,css-transitions,jquery-masonry,Jquery,Css,Css Transitions,Jquery Masonry,我如何维护砖石结构布局，同时将CSS3转换与当前图像结合起来这是我的html <body> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="masonry.js"></script> <script> $(function () { $('#container').maso

我如何维护砖石结构布局，同时将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>

我已经分别做了这两件事，虽然我不知道如何将它们连接在一起，以便在鼠标悬停时，砖石结构中使用的图像将发生转换-抱歉，如果不能做到这一点，我对这一切都还是新手

有什么想法吗？

给你：

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

jQueryMassey不会干扰悬停不透明度技术，因此任务只是将它们相互转换

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

PS我觉得1s转换太令人不安了。考虑将时间缩短到0.3s左右。

砌体位置元素使用<代码>绝对< /代码>和<代码>相关< /代码>属性。我不会使用

左：0

@MattCurtis不太确定我是否理解你的意思？CSS3过渡工程“见div imagetrans”和砌体工程——尽管我不明白如何在砌体中使用过渡

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;
}