Wie "skaliere und rotiere ich das Bild", wenn ich den Mauszeiger über den Text halte?

Question

Ich habe die jsfiddle erstellt, um Ihnen zu zeigen, was ich genau meine.

Wenn man den Mauszeiger über den Text bewegt, sollte es auch möglich sein, dass der Hintergrund den Effekt wie beim Schweben über dem img/div zeigt. Momentan funktioniert der Hover-Effekt nur, wenn Sie den Mauszeiger über den div/img halten und nicht, wenn Sie den Mauszeiger über den Text in der Mitte des Bildes bewegen. Der Link "a" sollte auch für div und text funktionieren.

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 
    } 

vielen Dank !! :))

Answer 1

müssen nur Ihre Hover CSS-Regel, dies ändern:

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

legte das Hover-Ereignis auf dem Behälter und wenden Sie die CSS für das Kind! EDIT: aktualisiert Geige: https://jsfiddle.net/o5sxhssv/1/

Answer 2

das Versuchen, die Anker-Tags Container sowohl der Text und Bild, so dass Sie wollen den Hover auf, dass:

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

Answer 3

Sie pointer-events: none auf .category_images_item span

verwenden können, verwenden pointer-events: none besagt, dass der Cursor nicht mit diesem Element interagiert.

Dann, um den gesamten Bereich anklickbar zu machen, machen Sie das a-Element-Display als einen Block, dies wird die Abdeckung der gesamte Bereich des Elternelements machen.

.category_images_item a { 
    display: block; 
} 

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

Answer 4

Wenn Sie nur das Markup ändern möchten, dann können Sie Ihren Code wie folgt neu angeordnet:

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