I'm currently using parallax.js (https://github.com/wagerfield/parallax) to get a parallax effect on a hero image on my page. I am trying to use a div tag to use as a "frame" so the image doesn't "appear" floating. I basically want the image to be a percentage larger than the div tag so as the image moves the container is fully covered by the image. This is what's happening. And not what I want. Hope this makes sense.
TIA
Here is my code:
<div id="scene" data-relative-input="true" class="float-image" style="border: 20px solid red; overflow: hidden;"> <img src="img/#.jpg" data-depth="0.2" class="cover-img"> <img src="img/#.png" data-depth="0.1" class="cover-img"> </div>
CSS:
#scene { position: relative; } .cover-img { max-height: 100%; max-width: 100%; } .float-image { z-index: -1; object-fit: cover; flex-shrink: 0; min-width: 100%; min-height: 100%; }
1.4m articles
1.4m replys
5 comments
56.9k users