CODEWITHSUNDEEP
jquerycsstwitter-bootstrap-3
JulianJ
JulianJ

Reputation: 1313

Darken a thumbnail on hover

I have a thumbnail image that when the mouse hovers over it a play icon appears along with some text. It's working great but I'm trying to figure out how I can darken the thumbail image when the text and play icon appear so they stand out more. I'm using Bootstrap 3. Any ideas how I can get this effect?

Here's a 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)
        }
    );

});

Upvotes: 0

Views: 1269

Answers (3)

k.cornett
k.cornett

Reputation: 189

You could use the pseudo :hover with a css filter. Don't forget vendor prefixes as well.

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

Upvotes: 1

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23738

See below a simple solution if i am not getting the requirements wrong, this can be done from simple css without any script usage if that is not a restriction. the trick is to make background color for the anchor black and reduce the image opacity on hover.

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>

Upvotes: 0

Steven
Steven

Reputation: 867

I used css hover with an after to achieve what you want : 

/* 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 -->

Upvotes: 1

Related Questions