@BreinerJT
Posted
Hello Jose, Congratulations on finishing this challenge!
For your .creation-items is not necessary create a class for every element like you do (.creation-item-one, .creation-item-two, etc), the pseudo class :nth-of-type will make this easy for you and help to maintain the html code cleaner. About the hover effect, your .creation-item:hover::before is ok but you need to create first a .creation-item:before, like this:
.creation-item:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: rgba(255, 255, 255);
opacity: .7;
transition: all .2s ease-in-out;
cursor: pointer;
}
.creation-item:hover::before {
content: '';
position: absolute;
width: 100%;
}
This one make the transition go from left to right because .creation-item:before width is set to 0 and your .creation-item:hover::before has a widht set to 100%. U can also set the width to 100%, height to 0% in the.creation-item:before and height to 100% in the .creation-item:hover::before and this will make the transition go from top to bottom.
Marked as helpful
@placeteno
Posted
@BreinerJT Thanks a lot for your thorough comment! This is what makes this community so great, people helping each other out.
I didn't realize I could have used the :nth-of-type pseudo class for each element and it makes perfect sense, the code is definitely much cleaner. I'll do some refactoring with your idea and your suggestion about the hover effect. Thanks again!
