悬停时使缩略图变暗

Question

我有一个缩略图，当鼠标悬停在它上面时，会出现一个播放图标和一些文字。它工作得很好，但我试图弄清楚如何在文本和播放图标出现时使缩略图图像变暗，以便它们更加突出。我正在使用 Bootstrap 3。有什么想法可以达到这种效果吗？

这是fiddle

HTML

<div class="container">
    <div class="row">
        <div class='col-sm-3 col-xs-6 col-md-3 col-lg-3 padding-0'>

            <div class="thumbnail">
                <a class="fancybox-media" data-fancybox-type="iframe" href="https://www.youtube.com/embed/PVob_tATVRI">

                    <div class="caption">
                        <h4 class="">Richard Feynman</h4>
                        <p class="">

                            Watch Him</p>
                    </div><!-- /.caption-->
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-JZQIhP_M6qtpPy4Hih-LsyGSBe5m7OlaRi5INdHVGy-bJRYIUg"
                        alt="" class="img-responsive">
                </a>
            </div><!-- /.thumb-->
        </div><!-- /.col -->

    </div>
    <!--end row-->

</div><!-- /.container -->

CSS

.thumbnail {
    position: relative;
    overflow: hidden;
    background: transparent;
    border: none;

}

.caption {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 1);
    width: 100%;
    height: 100%;
    padding: 2%;
    display: none;
    text-align: left;
    color: #fff !important;
    z-index: 2;
    background: transparent url(http: //www.oceania-attitude.com/applications/site/views/oceania/images/icons/play-video.jpg) no-repeat center; 
}

jQuery

/* Latest compiled and minified JavaScript included as External Resource */
$("[rel='tooltip']").tooltip();
$(document).ready(function () {
    $('.thumbnail').hover(
        function () {
            $(this).find('.caption').slideDown(250); //.fadeIn(250)
        },
        function () {
            $(this).find('.caption').slideUp(250); //.fadeOut(205)
        }
    );

});

Answer 1

您可以将伪 :hover 与 CSS 过滤器一起使用。 不要忘记供应商前缀。

.thumbnail a:hover img {
  filter: brightness(50%);  
}

Answer 2

我使用 css hover 和 after 来实现你想要的：

/* Latest compiled and minified JavaScript included as External Resource */  $("[rel='tooltip']").tooltip();    
     $(document).ready(function() {
    $('.thumbnail').hover(
        function(){
            $(this).find('.caption').slideDown(250); //.fadeIn(250)
        },
        function(){
            $(this).find('.caption').slideUp(250); //.fadeOut(205)
        }
    ); 

    });
    

.thumbnail {
    position:relative;
    overflow:hidden;
  background: transparent;
  border:none;

}

.thumbnail:hover:after {
  opacity:0.8;
}
.thumbnail:after {
  content:"";
  background-color:black;
  opacity:0.8;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
  transition: opacity 0.5s;
}
.caption {
    position:absolute;
    top:0;
    right:0;
    background:rgba(0, 0, 0, 1);
    width:100%;
    height:100%;
    padding:2%;
    display: none;
    text-align: left;
    color:#fff !important;
    z-index:2;
     background: transparent url(http://www.oceania-attitude.com/applications/site/views/oceania/images/icons/play-video.jpg) no-repeat center; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.css" rel="stylesheet"/>

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
 <div class="row">
 <div class='col-sm-3 col-xs-6 col-md-3 col-lg-3 padding-0'>
         
<div class="thumbnail">
      <a class="fancybox-media" data-fancybox-type="iframe" href="https://www.youtube.com/embed/PVob_tATVRI">
   
 <div class="caption">
                     <h4 class="">Richard Feynman</h4>
                     <p class="">
                     
                     Watch Him</p>
</div><!-- /.caption--> 
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-JZQIhP_M6qtpPy4Hih-LsyGSBe5m7OlaRi5INdHVGy-bJRYIUg" alt="" class="img-responsive">
      </a>
</div><!-- /.thumb--> 
        </div><!-- /.col --> 

 </div><!--end row-->

</div><!-- /.container -->

Answer 3

如果我没有弄错要求，请参阅下面的简单解决方案，如果这不是限制，则可以从简单的 css 完成，无需使用任何脚本。诀窍是使锚点的背景颜色为黑色并降低悬停时的图像不透明度。

a.darken {
  display: inline-block;
  background: black;
  padding: 0;
}

a.darken img {
  display: block;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

a.darken:hover img {
  opacity: 0.7;
}

<a href="#." class="darken">
  <img src="http://cdn2-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-8.jpg" width="200">
</a>