jQuery Masonry和CSS3

如何维护砌体布局但是当前图像涉及CSS3过渡？

inheritance人我的HTML

    $(function () { $('#container').masonry({ columnWidth: 1, itemSelector: 'div' }); });  
   
 
 
 
 
 
 
 
 
 
 
 
 
  

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

我已经成功地分别做了两个，虽然无法弄清楚我将如何将它们连接在一起，这样砌体中使用的图像会在hover时过渡 – 抱歉，如果不能这样做，我仍然是新的这个。

有任何想法吗？

Answer 1

你去了： http ： //jsbin.com/ifequp/2

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

jQuery Masonry不会干扰你的hover不透明技术，所以任务就是简单地把一个放到另一个。

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

PS我发现1s过渡太令人不安了。 考虑将时间缩短到0.3秒左右。