I am working on a project with HTML code and I am trying to create a hover effect for an image. I want the image to change when hovering anywhere on the box, not just on the image itself. I have tried adding multiple classes and ids, but the image only changes when hovered directly.
Below is the code snippet:
.expandable-box {
width: 20%;
height: 151px;
margin: 30px 12px 30px 0;
padding: 30px;
border: 2px solid #fff;
border-radius: 5px;
box-sizing: border-box;
display: inline-block;
position: relative;
overflow: hidden;
cursor: pointer;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.expandable-box .icon-cont {
margin: 20px auto;
display: block;
text-align: center;
position: absolute;
top: 10px;
left: 0;
right: 0;
}
.expandable-box a{
display:block;
color:#fff;
font-weight:600;
font-size:15px;
text-align: center;
position: absolute;
padding-top:35%;
width: 100%;
height:100%;
left:0;
top:0;
margin:0 auto;
z-index: 4;
}
.expandable-box a:hover{
color:#333;
}
.expandable-box:hover{
background:#fff;
}<div class="expandable-box">
<span class="icon-cont">
<img style="display: block; margin-left: auto; margin-right:
auto;width: 64px;height:64px;" src="img.png" />
</span>
<a title="Title" href="page.html.html">This</a>
</div>
I am trying to make the image change when the entire box is hovered over, not just when the image itself is hovered.
Thank you