具有流畅三列布局的 css 图像悬停动画

Question

我正在尝试在此页面上进行纯 CSS 悬停:http://www.bigideaadv.com/big_idea_v2/#work

我尝试在两个图像元素上使用绝对定位，并使用不透明度的过渡属性使它们在悬停时淡入淡出。但由于每个 parent 都是流动的，他们就消失了。我目前将“关闭”图像设置为相对，将“打开”图像设置为绝对。淡出很酷，但淡入不是因为绝对定位的图像没有设置宽度和高度。我想这就是原因。

我想要一个非 CSS 解决方案。 javascript 解决方案相当简单，我可以快速创建一个，但我相信它可以直接使用 css 来完成。

有人有什么想法吗？

结构:

 <div id="work">
    <p class="align-center work-copy"><span class="clarendon-italic">our</span><br />
    <span class="proxima-nova">WORK</span></p>

    <div id="clients">
        <div class="client_box">
            <a href="#modal-aaa" class="call-modal">
                <img src="wp-content/themes/skeleton/images/clients/aaa_logo_off.png" alt="American Arbitration Association" />
                <img src="wp-content/themes/skeleton/images/clients/aaa_logo.png" alt="American Arbitration Association" />
            </a>
        </div>
        <div class="client_box">
            <a href="#modal-art-of-shaving" class="call-modal">
                <img src="wp-content/themes/skeleton/images/clients/art_of_shaving_logo_off.png" alt="Art of Shaving" />
                <img src="wp-content/themes/skeleton/images/clients/art_of_shaving_logo.png" alt="Art of Shaving" />
            </a>
        </div>
        <div class="client_box">
            <a href="#modal-entenmanns" class="call-modal">
                <img src="wp-content/themes/skeleton/images/clients/entenmanns_logo_off.png" alt="Entenmanns" />
                <img src="wp-content/themes/skeleton/images/clients/entenmanns_logo.png" alt="Entenmanns" />
            </a>
        </div>

        <div class="client_box">
            <a href="">
                <img src="wp-content/themes/skeleton/images/clients/gdlsk_logo_off.png" alt="GDLSK" />
            </a>
        </div>
        <div class="client_box">
            <a href="">
                <img src="wp-content/themes/skeleton/images/clients/hale_and_hearty_logo_off.png" alt="Hale and Hearty" />
            </a>
        </div>
        <div class="client_box">
            <a href="">
                <img src="wp-content/themes/skeleton/images/clients/seviroli_logo_off.png" alt="Seviroli" />
            </a>
        </div>

        <div class="client_box">
            <a href="">
                <img src="wp-content/themes/skeleton/images/clients/aaa_logo_off.png" alt="American Arbitration Association" />
            </a>
        </div>
        <div class="client_box">
            <a href="">
                <img src="wp-content/themes/skeleton/images/clients/art_of_shaving_logo_off.png" alt="Art of Shaving" />
            </a>
        </div>
        <div class="client_box">
            <a href="">
                <img src="wp-content/themes/skeleton/images/clients/entenmanns_logo_off.png" alt="Entenmanns" />
            </a>
        </div>
    </div>

    <p class="align-center team-arrow"><img src="wp-content/themes/skeleton/images/down_arrow.png" alt="Down arrow" /></p>
</div>

CSS:

.client_box img {
    display: block;
    margin: 0 auto;
    width: 90%;
    max-width: 260px;
}

#work .client_box a[href*="modal"] {
    position: relative;
    margin: 0 auto 0 auto;
}

#work a[href*="modal"] img {
    position: relative;
    top: 0;
    left: 0;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}

#work a[href*="modal"] img:nth-child(2) {
    position: absolute;
}

#work a[href*="modal"] img:nth-child(1) {
    opacity: 1;
}

#work a[href*="modal"] img:nth-child(1):hover {
    opacity: 0;
}

#work a[href*="modal"] img:nth-child(2) {
    opacity: 0;
}

#work a[href*="modal"] img:nth-child(2):hover {
    opacity: 1;
}

#work .client_box:nth-child(3n) {
    border-right: 0;
}

Answer 1

您可以这样做 - 除了不透明度/过渡之外，还可以操纵高度。

#work a img {
  position:relative;
  margin:0 auto;
  opacity:1;
  display:block;
  transition-property:display, opacity;   
  transition-duration:.5s;   
  transition-timing-function:ease-in-out;
}
#work a img:nth-child(2) {
  opacity: 0;
  height:0;
  overflow:hidden;
}

/*hover*/
#work a:hover img:nth-child(1) {
  opacity:0;
  height:0;
}
#work a:hover img:nth-child(2) {
  opacity:1;
  height:auto;
}

最初的淡入并不完美，但看起来不错。

我必须在您当前的代码中更改一些继承的 CSS，因此这里是摘录:http://jsfiddle.net/uRQxa/1/