I am in the process of exploring a method to create a shadow animation when each box on the homepage of my website () is hovered over. I envision the animation to be similar to what is demonstrated on this page: . I have referred to this page as a guide to implement a hover shadow effect.
Below is the specific CSS/HTML for the div boxes on my website ():
.col-md-4 {
color:#00A5D1;
height:300px;
}
.col-md-3 {
color:#00A5D1;
height:300px;
box-shadow: 2 2px 3px rgba(0, 0, 0.1, 0.1);
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.col-md-4:hover {
background-color: #FFE097;
}
.col-md-3:hover {
-webkit-transform: scale(1.25, 1.25);
transform: scale(1.25, 1.25);
}
.col-md-4 h3 {
position: relative;
top: 40%;
transform: translateY(-50%);
}
.col-md-4 {
color:#00A5D1;
height:300px;
border: 1px solid #FF8B6F;
position: relative;
}
.col-md-3 {
height:300px;
position: relative;
}
.col-md-4:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
background: #FFE097;
opacity: 0;
}
.col-md-3:after {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 0;
left: 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.col-md-4:hover:after {
opacity: .5;
}
.col-md-3:hover:after {
opacity: 1;
}
.col-md-4 h3 {
position: relative;
z-index: 1;
top: 40%;
transform: translateY(-50%);
}
I have tried incorporating the hover-shadow effects by adding "col-md-3" class to the divs along with "col-md-4" which controls the color hover effect. However, I have not been successful with this method. I am unsure about the correct approach. Currently, the color of the boxes changes to a transparent orange/yellow shade upon hovering. Is there a way to achieve both the shadow animation and color change hover effects simultaneously? Essentially, I need to add a hover animation to what is already implemented on .
Thank you for your assistance.