Hello fellow UX Designer who is learning to code! Please excuse any mistakes in my code.
I have a CSS animated text overlay on top of a Hero Image with a JS effect applied to it.
Initially, I had trouble getting both images to display correctly. Either the text would show but hide the hero image behind it, or the hero image would appear but cover the text.
At first, I thought the issue was related to a class that was making the background of the text opaque, but after some troubleshooting by selectively commenting out parts of the code, I ruled that out.
Then, I realized that placing the text div inside the Hero Image div solved the problem. However, this only worked because I had disabled the Javascript effect applied to the Hero Image.
It seems like the tilt-effect class from the JavaScript script might be causing the conflict. Unfortunately, my knowledge of JavaScript is limited, so I'm not sure what specifically is causing the problem.
I suspect it has something to do with how the JavaScript is manipulating elements on the page. I've encountered a similar issue in the past when working with a footer and a responsive image gallery controlled by JavaScript, where the layout would shift after the gallery loaded. Could this be a similar case here?
If you'd like to take a look at the code, you can find it on JSFiddle: http://jsfiddle.net/thedonquixotic/8vv7t1as/2/
The part of the JavaScript responsible for the Tilt FX effect is labeled as the second section in the code.
Below is an excerpt from the HTML:
<!--Hero image with tilt effect-->
<div class="hero">
<div class="hero__imgwrap">
<!--<div class="grid__item">
<a class="link link--kumya" href="About.html"><span data-letters="David French">David French</span></a>
</div>-->
<img class="hero__img tilt-effect" data-tilt-options='{ "opacity" : 0.3, "extraImgs" : 3, "movement": { "perspective" : 1700, "translateX" : -7, "translateY" : -7, "rotateX" : -7, "rotateY" : -7 } }' src="https://cdn.tutsplus.com/craft/uploads/2013/11/14-snowflakes-lay-paper-copy.jpg" alt="Welcome!" />
</div>
</div>
<!--Hero image with tilt effect-->
And here is the relevant section of the JavaScript:
(JavaScript code provided)