Hover function not working in the service section of my html code

When I hover over over one of four font icons of my four services sections, text is supposed to vertically slide down . But nothing happens. the html part of my code starts at line 99 and ends at line 194 and the css part of my code begins at line 204 and ends at line 339. When I hover over one of the four sections , the p text and button are supposed to come vertically down. https://codepen.io/noblegas/pen/NWWXLzb

What CSS code specifically do you think should be making text and button move down? Also, are you expecting something to move when the user hovers over the icon or the parent containing the icon?

Typos on service on 312 and 316 my friend:

.serivce-item:hover .front-text{
transform:translateY(-200px);
}

.serivce-item:hover .back-text{
bottom:0;
}

so what am i suppose to change the css code to ? the class service-item is the same as it would be in my html code.

you misspelled ‘service’ on lines 312 and 316. You wrote ‘serivce’. Fix that and it works.

1 Like

that worked. thanks.