2

石積みのレイアウトを維持しながら、現在の画像に 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;
}

私は両方を別々に行うことができましたが、ホバーしたときに石積みで使用される画像が遷移するようにそれらを結合する方法がわかりません.これができない場合は申し訳ありません.これ。

何か案は？

4

1 に答える 1