jQuery砌體和CSS3

我如何維護砌體佈局還包括當前圖像的CSS3轉換？jQuery砌體和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; 
}

我已經成功地分別做雙方雖然想不通我怎麼會去加入他們在一起，使得圖像在磚石結構中使用時會過渡 - 如果不能做到這一點，對所有這些都是新的。

任何想法？

來源

2013-03-31 box

小提琴在哪裏？ –

砌體位置元素使用「絕對」和「相對」屬性。我不會使用'left：0'。 – mattsven

@MattCurtis不太清楚我明白你在做什麼？ CSS3過渡的作品'看到div imagetrans'和砌體的作品 - 雖然我不明白我將如何去使用砌體內的過渡 – box

在這裏你去：http://jsbin.com/ifequp/2

使用在演示的右上角的編輯按鈕查看代碼。

jQuery砌體不會干擾您的懸停不透明技術，因此任務是簡單地將其放入另一個。

下次請求幫助時，請在http://jsbin.com上發佈您的HTML/CSS/JS。不要粘貼你的整個網站，只有你有麻煩的部分。

PS我覺得1s的過渡太令人不安。考慮將時間縮短到0.3秒左右。

來源

2013-03-31 19:36:28

jQuery砌體和CSS3

回答

相關問題