Trouble with crossfading images and alignment

[sarahcenia]

Hi there and thank you for your time and help troubleshooting in advance,

I’m a visual artist trying to work in CSS for the first time by building an interactive image. My goal for this image is to allow a user to “unbury” a skull embedded in the background image by clicking on images of rocks and roots that disappear and reveal the skull in the background.

In the code below, I only have one rock and one root image inserted as example elements. In the final version I hope to have about 20 “rock” images covering the skull in the middle of the background that the user can click in succession to make them dissolve slowly.

The CSS code I have here is borrowed from a free source. I am currently very confused about why this code has moved all of my images so that they are not entirely visible on screen (I would prefer for them all to be aligned in the center). I also cannot figure out why the CSS is not performing the click-dissolve function it intends to because I am almost positive that I inserted the borrowed code correctly…

Thanks for reading this far. I know this is a many-pronged question. I have clearly gotten myself in a bit of a mess here with some of these elements and am tackling something that is probably above my skill level. As I understand it, I have all of the parts here, but they are perhaps not plugged into one another in the right manner. I am certainly not asking to have any code written for me, just looking for some support since I’ve gotten myself in a bind. I really appreciate any guidance you might have in helping me to execute this project!

Here is my Codepen link:

http://codepen.io/sarahcenia/pen/WvvEEp

Thank you!!!
-s

[sarahcenia]

Bearhead, thank you so much! This really helped me to figure out the parent-children relationship in selectors. Additionally, knowing how to link to the jquery library is exceedingly helpful. And position: relative seems to be fixing a lot of my issues with aligning element precisely ontop of the background. I really, sincerely appreciate the time you took to work out some of the rougher patches of my code. I’m set to apply this to additional images in this animation. Awesome. Thanks again.

[Author]

Posts