Html 带有rgba bug的铬盒阴影镶嵌

我遇到了一个我无法解决的奇怪错误。 我有一个div背景，其中包括一个css背景图像和一个框阴影，该框阴影使用rgba覆盖框阴影以使背景变暗

在第一次加载时，它看起来很好，但当我将鼠标悬停在按钮元素上时，它会更改整行的rgba。很奇怪

HTML:

<div class="jumbotron" id="bigimage" style="background-image: url(http://s3-ak.buzzfeed.com/static/2014-06/25/22/campaign_images/webdr07/the-one-detail-you-missed-from-captain-america-th-2-1617-1403749709-24_dblbig.jpg);">
    <div class="container">
         <h1 id="maintitle">The One Detail You Missed From "Captain America: The Winter Soldier"</h1>
 <a class="btn btn-lg btn-success" href="http://www.buzzfeed.com/javiermoreno/the-one-detail-you-missed-from-captain-america-the-winter-so" id="mainlink" role="button">Read more</a>
    </div>
</div>

示例图像：

---

我们能看到一些代码吗？我更新了更多的css和html结构。你的：hover的css在哪里？你看到这里的问题了吗？

#bigimage {
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 610px 155px inset;
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 610px 155px inset;
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 610px 155px inset;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    /* -webkit-transform: scale(1.1); */
    height: 100%;
    width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 25px;
    border-bottom:1px solid #eee;
    text-align: center;
}