Question

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

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

我想要一个非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/

css图像悬停动画与流体三列布局

1 个答案: