Hover effects in bootstrap

Question

I am trying to apply a simple hover effect for a section of thumbnails in Bootstrap.

<div class="regionPage">
<section class="thumbs">    
    <h3>Full list:</h3>
        <div class="row">
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                <a class="thumbnail" title="Afghanistan" href="../asia/afghanistan.php"><img src="../images/covers/afghanistanthumb.jpg" alt="Afghanistan"></a>
            </div>      
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                <a class="thumbnail" title="Argentina" href="../samerica/argentina.php"><img src="../images/covers/argentinathumb.jpg" alt="Argentina"></a>
            </div>

Maybe to just make the image slightly opaque on hover. For some reason I cannot get this to work

Answer 1

Just do it in the following way--

example snippet

.thumbnail:hover {
background-color: red;
opacity: 0.5;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        

<div class="regionPage">
<section class="thumbs">    
    <h3>Full list:</h3>
        <div class="row">
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                <a class="thumbnail" title="Afghanistan" href="../asia/afghanistan.php"><img src="https://www.w3schools.com/css/trolltunga.jpg" alt="Afghanistan"></a>
            </div>      
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                <a class="thumbnail" title="Argentina" href="../samerica/argentina.php"><img src="https://www.w3schools.com/css/trolltunga.jpg" alt="Argentina"></a>
            </div>