CSS: Perspective Hover Effect on Section - css

Question

Trying to get a hover effect to work hovering over a section (with no link). I've seen it used elsewhere but can't seem to get it right on my version.
To view what I'm trying to do, go to http://wpstaging.centerstaging.com/studios/studio-1/#specifications and attempt to hover over the first section which says 'Power'.
CSS:
.specs {
transition: 0.4s ease;
}
.specs:before {
height: 100%;
opacity: 0;
z-index: -1;
bottom: 0;
left: 0;
content: '';
transform: perspective(1000px) rotateX(90deg);
transform-origin: 50% 100%;
transition: all 0.4s cubic-bezier(0.2, 0, 0.15, 1);
background-image: linear-gradient(-264deg, #52227f -50%, #ff004e 100%);
}
.specs:hover:before {
opacity: 1;
transform: perspective(1000px) rotateX(0);
}
HTML (edited):
<section class="elementor-section elementor-inner-section specs">
</section>

Answer 1

Instead of standard selectors like class and id what you can use here is the attribute selectors. The "Power" Section in your code have a data-id attribute
which can be given styles like below.
[data-id^="44962df"]:hover {
background-image: linear-gradient(254deg, #52227F 50%, #FF004E 100%);
}
Resulting to this on hover

Answer 2

Solved it. Took some experimentation, but here's what worked.
.specs:after {
background-image: linear-gradient(-264deg, #52227f -50%, #ff004e 100%)!important;
content: "";
height: 100%;
left: 0;
top: 0;
width: 100%;
position: absolute;
transform: perspective(1000px) rotateX(90deg);
transform-origin: 50% 100%;
transition: all 0.4s cubic-bezier(0.2, 0, 0.15, 1);
z-index: -1;
}
.specs:hover:after{
opacity: 1;
transform: perspective(1000px) rotateX(0);
}