부트 스트랩의 호버 효과

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>