ホバーを使用したときにクリッピングが消えることはありません

Question

何らかの理由で、オブジェクト上にカーソルを置いたときにクリッピングを無効にすることができません。ここで私が使用しているコードです。 私はすべてのことが正しいと確信しています。それが役に立ったらGoogle Chromeを使用しています。

<section id="map"> 
    <figure id="point0"> 
     <img src="image0.jpg" alt="" /> 
     <figcaption> 
      <time>3:30 a.m.</time> Start from the Longs Peak Ranger 
      Station, nine miles south of Estes Park. Be sure to pack 
      food, extra water, 
      sunblock, warm clothes, gloves, and caps. 
     </figcaption> 
    </figure> 

    <figure id="point1"> 
     <img src="image1.jpg" alt="" /> 
     <figcaption> 
      <time>5:30 a.m.</time> Stop at Mills Moraine for a 
      view of the sunrise. 
     </figcaption> 
    </figure> 

    <figure id="point2"> 
     <img src="image2.jpg" alt="" /> 
     <figcaption> 
      <time>7:30 a.m.</time> Time for a break at Granite Pass. 
     </figcaption> 
    </figure> 

    <figure id="point3"> 
     <img src="image3.jpg" alt="" /> 
     <figcaption> 
      <time>8:30 a.m.</time> Climb through the Boulder Field 
      on the way to the Keyhole. 
     </figcaption> 
    </figure> 

    <figure id="point4"> 
     <img src="image4.jpg" alt="" /> 
     <figcaption> 
      <time>9:00 a.m.</time> Stop at the 
      Agnes Vaille shelter for a well-deserved breakfast. 
     </figcaption> 
    </figure> 

    <figure id="point5"> 
     <img src="image5.jpg" alt="" /> 
     <figcaption> 
      <time>9:30 a.m.</time> It's time to go through 
      the Keyhole. Be prepared for heavy winds. 
     </figcaption> 
    </figure> 

    <figure id="point6"> 
     <img src="image6.jpg" alt="" /> 
     <figcaption> 
      <time>10:00 a.m.</time> Follow the painted targets 
      along the Ledges. 
     </figcaption> 
    </figure> 

    <figure id="point7"> 
     <img src="image7.jpg" alt="" /> 
     <figcaption> 
      <time>11:00 a.m.</time> Take special care when crossing 
      the Narrows. 
     </figcaption> 
    </figure> 

    <figure id="point8"> 
     <img src="image8.jpg" alt="" /> 
     <figcaption> 
      <time>11:15 a.m.</time> You're almost there! Climb the 
      Homestretch to reach the summit. 
     </figcaption> 
    </figure> 

    <figure id="point9"> 
     <img src="image9.jpg" alt="" /> 
     <figcaption> 
      <time>11:45 a.m.</time> Congratulations, you've reached 
      the top! Time for lunch and a few photos. 
     </figcaption> 
    </figure> 

    </section> 





figure { 
    background-color: rgb(70, 76, 222); 
    color: white; 
    width: 150px; 
    border-radius: 15px; 
    position: absolute; 
    z-index: 1; 
    clip: rect(auto, 20px, 20px, auto); 
} 

figure:hover { 
    clip: none; 
    z-index: 2; 

} 

figure figcaption { 
    font-size: 12px; 
    margin: 10px; 
} 

このように、ホバーはクリップエフェクトを無効にしてイメージをクリップ解除して意味をなさないようにしません。

Answer 1

figure:hover { 
    clip: none; 
    z-index: 2; 

} 

デフォルトはクリップする必要があります：自動私は信じている：

figure:hover { 
    clip: auto; 
    z-index: 2; 

}