How to float/show image outside of its own div?

Question

I want my logo to float outside the overflow:hidden div

This is my HTML Code:

    .login-card{
        width: 280px;
        background: rgb(255,250,250,0.6);
        margin-left: 45px;
        border-radius: 2px;
        box-shadow: 0 2px 2px rgba(0,0,0,.3);
        overflow: hidden;
    }

    .login-card img{
        width:70%;
        height:70%;
        margin-top: -25px;
        background-color: crimson; /*this is just to cover up the image*/
    }

   <div class="login-card">
        <img src="captiveportal-logo.png"/>
        <form name="login_form" method="">
            <input type="text">
            <input type="password">
            <input type="submit">
        </form>    
 </div>

I really want it to be half floating outside its div

You might want to use [placeholder.com](https://placeholder.com) for your image, so the snippet actually works. — domsson, Dec 26 '18 at 10:02
There is a reason it is called `overflow:hidden` ... it hides overflows. Why the use of it ? I can't in this case see any reason. — Asons, Dec 26 '18 at 10:02
But I guess, I'll throw `overflow:hidden`, and just work with `input`'s width — CodeRed, Dec 27 '18 at 02:21

score 0 · Answer 1 · answered Dec 26 '18 at 10:13

I think you need another extra outside container to overcome this issue. Look at the snippet. In this case you should aware about image size because it is now inheriting size from outside div where set the position: relative;

.outside {
 position:relative;
}
.login-card{
 width: 280px;
 background: rgb(255,250,250,0.6);
 margin-left: 45px;
 border-radius: 2px;
 box-shadow: 0 2px 2px rgba(0,0,0,.3);
 overflow: hidden;
}
.login-card img{
 width:100px;
 height:100px;
 position:absolute;
 left:0;
 top:-25px;
 background-color: crimson; /*this is just to cover up the image*/
}

<div class="outside">
<div class="login-card">
        <img src="https://via.placeholder.com/100.png/09f/fff"/>
        <form name="login_form" method="">
            <input type="text">
            <input type="password">
            <input type="submit">
        </form>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 </div>
</div>

the only addition here is the outside div right? sadly, its not working — CodeRed, Dec 27 '18 at 02:17
@CodeRed have you added my given CSS as well? It should work as expected. — Hanif, Dec 27 '18 at 04:18

How to float/show image outside of its own div?

1 Answers1