@HPalazzi
Submitted
Did not figure it out the hover image question, i tried overlaping the image in so many ways and did not get it in the end...
Akanni Feyisara
@Feyisara2306
All comments
- Akanni Feyisara• 110
@Feyisara2306
Posted
Hello Heitor! well done on completing the challenge.
As regard your question on image overlay hover effect, put the two images in a separate div and declare an empty div for the overlay, then style its container div with a position:relative; and a 100% width. Then display the images as a block, and the overlay div position: absolute; .
Here is a snippet below...
.image{ position: relative; width: 100%; }
.image_img{ display: block; width: 100%; border-radius: 10px; }
.image_overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 255, 247, 0.4); display: flex; align-items: center; justify-content: center; opacity: 0; border-radius: 10px; }
I hope this helps.
Good luck and happy coding!
Marked as helpful
1 - Petru Banceanu• 110
@Petru14
Submitted
The most difficult thing about the challenge was setting "text-align: center; " because I forgot about this property and I took me a while till I figured out.
I'm not 100% sure if my seizes for margin and padding are correctly.
The only questions I have are about how clean my code is and where I can improve.
Thanks!
Akanni Feyisara• 110@Feyisara2306
Posted
Well done Petru!
I noticed the code isn't responsive at all. You can try using relative units(like vh, vw and percentages) as Joaquin pointed out.
Also the page isn't centralized, I suggest adding a 100% height to the html and body.
html, body{ height: 100%; }
html{ display: table; margin: auto; }
body{ display: table-cell; vertical-align: middle; }
Marked as helpful
2 - Yahir_AM• 370
@Yahir-am
Submitted
Hi everyone, a feedback will be appreciated :D
Akanni Feyisara• 110@Feyisara2306
Posted
Well done! You have no issue at all. I just completed the same project but it isn't as perfect as yours. I've got some questions if you don't mind, how did you centralize the elements on the page? and also, the display I get on my browser when coding isn't the same as the one that shows with the live site url, I want to know what I'm doing wrong, Thanks.
1
