如何在光标移动后应用轻松退出？

Question

我有6个图片，所有应用与轻松的内部css。当图像在代码上徘徊时，代码工作得完美无缺。然而，由于它只是作为一个悬停，而不是整个皮带，它只是停止工作。所以这只会让你轻松些。想知道怎样才能让它放松下来。谢谢!要想在行动中看到go 这里

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;