圖像重疊問題

Question

我正在使用以下代碼進行圖像疊加效果。 我從某個網站上獲得信息，剛才我注意到它在Firefox和IE上不起作用，它只顯示黑色背景。 但是，當我們將鼠標懸停時，顯示的圖片是我的代碼。 我正在使用引導程序。

  .hovereffect { width: 100%; height: 100%; float: left; overflow: hidden; position: relative; text-align: center; cursor: default; background:#000; cursor:pointer; } .hovereffect .overlay { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; padding: 50px 20px; } .hovereffect img { display: block; position: relative; max-width: none; width: calc(100% + 20px); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .hovereffect:hover img { opacity: 0.4; filter: alpha(opacity=40); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .hovereffect h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; font-weight:bold; overflow: hidden; padding: 0.5em 0; background: rgba(0, 0, 0, 0.5); } .hovereffect h2:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #fff; content: ''; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); } .hovereffect:hover h2:after { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .hovereffect a, .hovereffect p { color: #FFF; opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); } .hovereffect a:hover { color:#fff; text-decoration:none; } .hovereffect:hover a, .hovereffect:hover p { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="hovereffect"> <img class="img-responsive" src="http://placehold.it/350x250" alt=""> <div class="overlay"> <h2>Effect 12</h2> <p> <a href="#">LINK HERE</a> </p> </div> </div> </div> 

Answer 1

 .hovereffect { width: 100%; height: 100%; float: left; overflow: hidden; position: relative; text-align: center; cursor: default; background:#000; cursor:pointer; } .hovereffect img{ opacity:0; } .hovereffect .overlay { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; padding: 50px 20px; } .hovereffect img { display: block; position: relative; max-width: none; width: calc(100% + 20px); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .hovereffect:hover img { opacity: 0.4; filter: alpha(opacity=40); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .hovereffect h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; font-weight:bold; overflow: hidden; padding: 0.5em 0; background: rgba(0, 0, 0, 0.5); } .hovereffect h2:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #fff; content: ''; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); } .hovereffect:hover h2:after { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .hovereffect a, .hovereffect p { color: #FFF; opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); } .hovereffect a:hover { color:#fff; text-decoration:none; } .hovereffect:hover a, .hovereffect:hover p { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="hovereffect"> <img class="img-responsive" src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" alt=""> <div class="overlay"> <h2>Effect 12</h2> <p> <a href="#">LINK HERE</a> </p> </div> </div> </div> </div> 

這是JSFiddle

希望這可以幫助。