How to "scale and rotate image" when hovering over text aswell? - html

Question

I created the jsfiddle, to show you what i mean exactly.
When hovering over the text, it should also be possible that the background takes the effect like when hovering over the img/div. Currently the hover effect only works when hovering over the div/img and not when hovering over the text in the middle of the image.. The "a" link should work on the div and text aswell.
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
}
Thanks alot!! :))

Answer 1

just have to change your hover css rule to this:
.category_images_item:hover .category_images_img{
transform: scale(1.03) rotate(-1deg);
opacity: 0.5
}
put the hover event on your container and apply the css to the child!
EDIT: updated fiddle: https://jsfiddle.net/o5sxhssv/1/

Answer 2

Try this, the anchor tags container both the text and image, so you want the hover on that:
.category_images_item a:hover .category_images_img{
transform: scale(1.03) rotate(-1deg);
opacity: 0.5
}

Answer 3

You can use pointer-events: none on .category_images_item span
Using pointer-events: none says that the cursor does not interact with that element.
Then to make the whole area clickable, make the a element display as a block, this will make the a cover the entire area of it's parent element.
.category_images_item a {
display: block;
}
https://jsfiddle.net/o5sxhssv/2/

Answer 4

If you only want to change the markup, then you could rearrange your code like this:
<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/