ブートストラップのホバー効果

Question

ブートストラップのサムネイル部分に簡単なホバー効果を適用しようとしています。

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

画像をホバリングでわずかに不透明にすることがあります。私はこれが

Answer 1

ちょうど次way--

例でそれを行う

.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>