jQuery Каменная кладка и CSS3

Как сохранить макетную кладку, кроме того, включить переход CSS3 с текущими изображениями?jQuery Каменная кладка и CSS3

Heres мой 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

Где находится скрипка? –

Элементы позиции кладки с использованием свойств 'absolute' и' relative'. Я бы не использовал 'left: 0'. – mattsven

@MattCurtis Не совсем уверен, что я понимаю, к чему вы клоните? Переход CSS3 работает «см. Div imagetrans», и каменная кладка работает тоже, хотя я не понимаю, как я буду использовать переходы внутри кладки – box

Здесь вы идете: http://jsbin.com/ifequp/2

Используйте кнопку редактирования в верхнем правом углу демо, чтобы увидеть код.

jQuery Масонство не мешает вашей технике наведения на непрозрачность, поэтому задача состояла в том, чтобы просто поместить один в другой.

В следующий раз, когда вы обратитесь за помощью, опубликуйте свой HTML/CSS/JS по телефону http://jsbin.com. Не вставляйте весь свой веб-сайт, только ту часть, с которой вы столкнулись.

PS Я считаю переход 1s слишком тревожным. Подумайте о снижении времени до 0,3 с или около того.

источник

2013-03-31 19:36:28

jQuery Каменная кладка и CSS3

ответ

Смежные вопросы