html - 光标移开后如何应用缓入缓出？

Question

我有 6 张图片都应用了 ease-in-out CSS。当图像悬停在代码上时，代码可以完美运行。但是，由于它仅作为悬停应用而不是整个元素，因此它只是停止工作。所以它只会缓和。想知道如何让它缓和。谢谢!要查看实际效果，请转到 here

CSS

.img {
        float: left;
}
    #center:hover{
position: relative;
        opacity: 0.5;
        -webkit-box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
        box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
        transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -o-transition: all .4 ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        -ms-transition: all .4 ease-in-out;
        }

HTML

<div class="center">
        <a href="https://www.netatlantic.com/resources/industries/agencies?utm_source=netatlantic&utm_medium=web_homepage&utm_campaign=vertical&utm_content=agencies"><img id="center" src="featuredindustries/img/1.png" style="float:left; padding-left: 0px; margin: auto;" hspace="00px" alt="thumbnail1" width="311" height="311" float="left" longdesc="Ad Agencies"/></a>

        <a href="https://www.netatlantic.com/resources/industries/high-volume-senders?utm_source=netatlantic&utm_medium=web_homepage&utm_campaign=vertical&utm_content=high-volume-senders"><img src="featuredindustries/img/2.png" alt="thumbnail2" name="center" width="311" height="311" class="img1" id="center" style="float:left" longdesc="High-Volume Senders" align="left" hspace="0px"/></a>

        <a href="https://www.netatlantic.com/resources/industries/publishing?utm_source=netatlantic&utm_medium=web_homepage&utm_campaign=vertical&utm_content=publishers"><img id="center" src="featuredindustries/img/3.png" style="float:left" hspace="00px" alt="thumbnail1" width="311" height="311" float="left" longdesc="Publishers"/></a>

        </br><a href="https://www.netatlantic.com/resources/industries/politicalcampaigners?utm_source=netatlantic&utm_medium=web_homepage&utm_campaign=vertical&utm_content=political"><img src="featuredindustries/img/4.png" alt="thumbnail1" name="center" width="311" height="311" id="center" style="float:left; padding-left: 0px; margin: auto; display: block;" longdesc="Political Senders" hspace="00px" float="left"/></a> 

        <a href="https://www.netatlantic.com/resources/industries/leadcapture?utm_source=netatlantic&utm_medium=web_homepage&utm_campaign=vertical&utm_content=leadcapture"><img id="center" src="featuredindustries/img/5.png" style="float:left" hspace="00px" alt="thumbnail1" width="311" height="311" float="left" longdesc="Lead-Capture"/></a>

        <a href="https://www.netatlantic.com/emailmarketing/email-marketing-overview"><img id="center" src="featuredindustries/img/6.png" style="float:left" hspace="00px" alt="thumbnail1" width="311" height="311" float="left" longdesc="Other"/></a>
    </div>

Answer 1

为 img 添加这个(不在悬停时)

-webkit-box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4 ease-in-out;
-webkit-transition: all .4s ease-in-out;
-ms-transition: all .4 ease-in-out;
transition-timing-function: linear;

仅在悬停时使用

position: relative;
opacity: 0.5;