jQuery Masonry and CSS3

问题

How do i maintain the masonry layout yet involve the CSS3 transition with the current images?

Heres my 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>

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

I've managed to do both separately although can't figure out how i would go about joining them together so that the images used in the masonry will transition when hovered over - sorry if this can't be done im still new to all of this.

Any ideas?

回答1:

Here you go: http://jsbin.com/ifequp/2

Use the edit button in the top right corner of the demo to see the code.

jQuery Masonry does not interfere with your hover-opacity technique, so the task was to simply put one into another.

Next time you ask for help, please publish your HTML/CSS/JS on http://jsbin.com . Don't paste your whole website, only the part you're having trouble with.

PS I find the 1s transition too disturbing. Consider lowering the time to 0.3s or so.

来源：https://stackoverflow.com/questions/15732643/jquery-masonry-and-css3

标签

jquery

css3

css-transitions

jquery-masonry