CODEWITHSUNDEEP
htmlcss
user3657100
user3657100

Reputation: 5

How to overlay images

I am trying to hide one of the images, it does hide one of the images but it leaves a border around the image that suppose to be there if its not hidden. in other words i want the hidden image to be behind the visible image. i hope i am clear

http://jsfiddle.net/47Vab/1/

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="main.css" />
        <title></title>
    </head>
    <body class="body">
        <div class="box">
            <div class="imgs">
                <img id="Img2" src="IMG/2.jpg"/>
                <img id="Img1" class="hidden" src="IMG/1.jpg"/>
            </div>
        </div>
    </body>
</html>


body{
    background-color:#F0F0F0 ;
    color:#000305;/*font color*/
    font-size: 87.5%;/*87.5% out of 14px*/
    font-family: Arial,'Lucida Sans Unicode';
    line-height: 1.5;
    text-align: left;
}

.body{
    margin:0 auto;
    width:70%;
    clear:both;
}

.box{
    background-color: yellowgreen;
    margin:50px auto;
    width:80%;
    height:auto;
    border-style:solid;
    border-width:5px;
    border-color: black;
}



.imgs{
    margin:50px auto;
    width:80%;
    border-style:solid;
    border-width:5px;
    border-color: black;
}

img {
    max-width: 100%;
    display: block;

}
.hidden{
    visibility : hidden;
}

Upvotes: 0

Views: 41

Answers (1)

Colin Bacon
Colin Bacon

Reputation: 15619

Try display: none instead of visibility: hidden.

visibility: hidden hides the image but retains it's space. Where as display: none hides it and does not take up any space.

Fiddle

Upvotes: 1

Related Questions