html - Hang image off screen without breaking responsivness -
i'm having issue hanging image outside of it's container / off screen without breaking responsiveness of website. main issue have scroll right , left based on how image positioned.
here's example of i'm trying achieve (the product images left , right scroll down): http://invisionapp.com/
here's i'm @ far: http://codepen.io/darcyvoutt/pen/ekrmoz
the code on image is:
.section { height: 505px; } .left, .right { display: block; float: left; width: 50%; } .left { background: yellow; } .right { position: relative; } .image { max-width: none !important; height: 507px !important; width: 873px !important; display: block; }
let me know if have questions left out accident.
try:
.wrap { ... overflow: hidden; } .image { position: absolute; .right & { left: 40%; } .left & { right: 60%; } }
should work html
:
<div class="section"> <div class="left"> <img class="image" src="http://sysomos.com/sites/default/files/map_twitter.png" /> </div> </div> <div class="section"> <div class="right"> <img class="image" src="http://sysomos.com/sites/default/files/map_twitter.png" /> </div> </div>
Comments
Post a Comment