イメージをその下の次のdivにオーバーラップするにはどうすればよいですか？

Question

イメージを下の次のdivにオーバーラップさせる方法を教えてください。

私の説明がわからない場合、これは私が欲しい機能です。 click here

この は私が持っているもので、これまで

HTML：

<p>overflow:hidden</p> 
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible. <img src="https://vetstreet.brightspotcdn.com/dims4/default/8fe930e/2147483647/crop/0x0%2B0%2B0/resize/645x380/quality/90/?url=https%3A%2F%2Fvetstreet-brightspot.s3.amazonaws.com%2F57%2Ff65100a80811e0a0d50050568d634f%2Ffile%2FStaffordshire-Bull-Terrier-3-645mk062811.jpg" alt="Image result for dogs staffordshire terrier"/></div> 

CSS：あなたが理解し、より良い必要する必要が

div.hidden { 
    background-color: #00FF00; 
    width: 100%; 
    height: 100px; 
    overflow: hidden; 
} 

Answer 1

このレイアウトあなたのスクリーンショットのようないくつかのものが、 CSS位置決め属性。あなたが別の要素に、またはページの左上からの相対絶対座標で任意の要素を位置決めすることができます........

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    overflow: hidden; 
 
} 
 

 
.ghost { 
 
    position: absolute; 
 
    left: -100%; 
 
} 
 

 
.framed { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 15rem; 
 
    margin-left: -7.5rem; 
 
} 
 

 
.logo { 
 
    margin-top: -9em; 
 
    cursor: default; 
 
} 
 

 
.form { 
 
    margin-top: -4.5em; 
 
    transition: 1s ease-in-out; 
 
} 
 

 
.input { 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    font-size: 1.125rem; 
 
    line-height: 3rem; 
 
    width: 100%; 
 
    height: 3rem; 
 
    color: #444; 
 
    background-color: rgba(255, 255, 255, .9); 
 
    border: 0; 
 
    border-top: 1px solid rgba(255, 255, 255, 0.7); 
 
    padding: 0 1rem; 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 

 
.input:focus { 
 
    outline: none; 
 
} 
 

 
.input--top { 
 
    border-radius: 0.5rem 0.5rem 0 0; 
 
    border-top: 0; 
 
} 
 

 
.input--submit { 
 
    background-color: rgba(92, 168, 214, 0.9); 
 
    color: #fff; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
    border-top: 0; 
 
    border-radius: 0 0 0.5rem 0.5rem; 
 
    margin-bottom: 1rem; 
 
} 
 

 
.text { 
 
    color: #fff; 
 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8); 
 
    text-decoration: none; 
 
} 
 

 
.text--small { 
 
    opacity: 0.85; 
 
    font-size: 0.75rem; 
 
    cursor: pointer; 
 
} 
 

 
.text--small:hover { 
 
    opacity: 1; 
 
} 
 

 
.text--omega { 
 
    width: 200%; 
 
    margin: 0 0 1rem -50%; 
 
    font-size: 1.5rem; 
 
    line-height: 1.125; 
 
    font-weight: normal; 
 
} 
 

 
.text--centered { 
 
    display: block; 
 
    text-align: center; 
 
} 
 

 
.text--border-right { 
 
    border-right: 1px solid rgba(255, 255, 255, 0.5); 
 
    margin-right: 0.75rem; 
 
    padding-right: 0.75rem; 
 
} 
 

 
.legal { 
 
    position: absolute; 
 
    bottom: 1.125rem; 
 
    left: 1.125rem; 
 
} 
 

 
.photo-cred { 
 
    position: absolute; 
 
    right: 1.125rem; 
 
    bottom: 1.125rem; 
 
} 
 

 
.fullscreen-bg { 
 
    position: absolute; 
 
    height: 50vh; 
 
    z-index: -1; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: url(https://unsplash.it/1800/700?random.jpg) center; 
 
    background-size: cover; 
 
} 
 

 
#toggle--login:checked~.form--signup { 
 
    left: 200%; 
 
    visibility: hidden; 
 
} 
 

 
#toggle--signup:checked~.form--login { 
 
    left: -100%; 
 
    visibility: hidden; 
 
} 
 

 
@media (height:300px) { 
 
    .legal, 
 
    .photo-cred { 
 
    display: none 
 
    } 
 
}

<input type="radio" checked id="toggle--login" name="toggle" class="ghost" /> 
 
<input type="radio" id="toggle--signup" name="toggle" class="ghost" /> 
 

 

 

 
<form class="form form--login framed"> 
 
    <input type="email" placeholder="Email" class="input input--top" /> 
 
    <input type="password" placeholder="Password" class="input" /> 
 
    <input type="submit" value="Log in" class="input input--submit" /> 
 

 
    <label for="toggle--signup" class="text text--small text--centered">New? <b>Sign up</b></label> 
 
</form> 
 

 
<form class="form form--signup framed"> 
 
    <h2 class="text text--centered text--omega">Join the other <b>152.6 million</b> blogs and</br>share all that you love.</h2> 
 

 
    <input type="email" placeholder="Email" class="input input--top" /> 
 
    <input type="password" placeholder="Password" class="input" /> 
 
    <input type="text" placeholder="Username" class="input" /> 
 
    <input type="submit" value="Sign up" class="input input--submit" /> 
 

 
    <label for="toggle--login" class="text text--small text--centered">Not new? <b>Log in</b></label> 
 
</form> 
 
</div> 
 

 
<div class="fullscreen-bg"></div>