テキストをまたぐときに「イメージを拡大縮小して回転する」方法

Question

jsfiddleを作成しました。私が正確に何を意味するかを示します。

テキストの上にマウスを置くと、背景がimg/divの上にマウスを置いたときのように効果を発揮することも可能になるはずです。現在のホバー効果はdiv/imgの上にカーソルを置いたときにのみ有効で、画像の中央にあるテキストの上にマウスを置いたときは機能しません。 "a"リンクはdivとtextでも有効です。

https://jsfiddle.net/o5sxhssv/

HTML：

<!--First image--> 

<div class="category_images_item"> 
<a href=""> 
<span>Watches</span> 

<div class="category_images_img" style="background:url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;"> 

</div> 
</a> 
</div> 
</div> 

CSS：たくさん

.category_images{ 
margin: 0 auto 
} 
.category_images_item{ 
    width: 400px; 
    height: 400px; 
    position: relative; 
    background-color: black; 
    overflow: hidden; 
    transition: all .8s ease; 
    margin: 10px;float: left 
    } 
    .category_images_item span{ 
    color: white; 
    font-weight: bold; 
    font-size: 50px; 
    font-style: italic; 
    z-index: 100; 
    position: absolute; 
    width: 100%; 
    text-align: center; 
    top: 150px 
    } 
.category_images_img{ 
background-size: cover; 
width: 400px; 
height: 400px; 
transition: all .8s ease; 
opacity: 0.7 
} 
.category_images_img:hover{ 
    transform: scale(1.03) rotate(-1deg); 
    opacity: 0.5 
    } 

感謝!! :)）

Answer 1

はちょうどこれにあなたのホバーCSSルールを変更する必要があります。

.category_images_item:hover .category_images_img{ 
    transform: scale(1.03) rotate(-1deg); 
    opacity: 0.5 
} 

はあなたのコンテナの上にホバーイベントを入れて、子供にCSSを適用します！ EDIT：更新フィドル：

.category_images_item a:hover .category_images_img{ 
    transform: scale(1.03) rotate(-1deg); 
    opacity: 0.5 
} 

Answer 2

あなたはその上でホバーをしたいので、テキストと画像の両方のアンカータグコンテナ、これを試してみてくださいpointer-events: noneは、カーソルがその要素と対話していないことを示します。

次に、領域全体をクリック可能にするには、要素表示をブロックにします。これは、親要素の全領域をカバーします。

.category_images_item a { 
    display: block; 
} 

https://jsfiddle.net/o5sxhssv/2/

Answer 3

あなたが使用してpointer-events: none

.category_images_item span上を使用することができます。 https://jsfiddle.net/o5sxhssv/1/

Answer 4

あなただけのマークアップを変更したい場合、あなたはこのようにあなたのコードを並べ替えることができます：

<div class="category_images"> 

    <!--First image--> 

     <div class="category_images_item"> 
      <a href=""> 

      <div class="category_images_img" style="background:url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;"> 
      <span>Watches</span></div> 
      </a> 
     </div> 
    </div> 

https://jsfiddle.net/tung3yx2/