Tribute page! Feedback and advice please!

Tribute page! Feedback and advice please!
0

#1

Hey guys, this is the first page I’ve ever made and I’m pretty happy with it as a first attempt! I’ve probably spent about 15 hours on this over a week. The JS timeline was a copy-paste job from a tutorial I found.

https://codepen.io/Prohibit/full/wqyNZK

There is one thing I am not happy about which I can’t work out. When you hover over the images, how do you make it appear so that the image is always on top? I’ve tried the z-index 99 but it isn’t doing anything. If anyone can help that would be great.

Thoughts and suggestions all welcomed! Time to move onto the next exercise now!


#2

You can use z-indexing but try applying it to the div element that surrounds the image. You may have to use javascript instead of a :hover pseudo class though.


#3

I’ve tried applying “z-index: 99;” to all elements in the gallery section of my page, one by one to see if it works and it isn’t so I’m stuck. Any other ideas or am I trying to do the impossible?


#4

Your tributr page is excellent.


#5

Thanks, I’m working on my portfolio page now.


#6

You are almost there. When using z-index, the element you are assigning it to needs to be positioned (relative, absolute, fixed …). So, just add position:relative; to your .effectInlarge class and the effect should work as intended.


#7

Thank you, it worked. Didn’t even need to use the z-index!

I’m working on my portfolio now :slight_smile:. My tribute page is now fully complete with that final touch!