Created
March 17, 2014 16:09
-
-
Save thomasjao/9602291 to your computer and use it in GitHub Desktop.
HTML -- Hide partial of internal DOM object within an outer DOM object
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- This snippet demo how to HIDE partial of a division within some range (another division) | |
| If replace #d2 below with images can make parts of the image shown within #s1 range. | |
| Also some suggest to add "margin: 0 auto;" within #s1 CSS, don't know why? | |
| --> | |
| <!DOCTYPE html> | |
| <head> | |
| <style> | |
| #s1, #s2 { width: 300x; height: 200px; } | |
| #s1 { top: 50px; background-color: blue; overflow: hidden; } /* assume #s1 is the range */ | |
| #s2 { background-color: brown; left: 100px; position: relative; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="s1"> <!-- Firstly, make #s2 within #s1 --> | |
| <div id="s2"></div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
A MASK EFFECT
Horizontal Slide Effect often seen on some web sites' banner. How do we get it down?
Basic concept is to MASK partial of a picture, then using time interval to slide the picture left or right depends the effect to show.