How To Align 4 Images As 2*2 In Html?
I have been trying to align four images that are to be displayed as the pic below. But I have been getting spaces after each row. How can I remove them? Also is there a way that
Solution 1:
body{
background-color:"ffffff";
}
.img-grid{
width: 50%;
float:left;
height:400px;
}
.img-gridimg{
width :100%;
height:400px;
}
.caption{
display :none;
}
.img-grid:hover.caption{
text-align: center;
display:block;
background: #000;
color: #fff;
font-size:16px;
font-weight: bold;
margin-top: -100px;
padding: 10px;
}<divclass="transbox img-grid"><imgsrc="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" /><divclass="caption"><p>Looking Into The Future</p></div></div><divclass="transbox img-grid"><imgsrc="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" /><divclass="caption"><p>Looking into the future</p></div></div><divclass="transbox img-grid"><imgsrc="https://s18.postimg.org/acomst9gp/image.jpg" /><divclass="caption"><p>Looking Into The Future</p></div></div><divclass="transbox img-grid"><imgsrc="https://s13.postimg.org/8yima8xvb/Construction.jpg" /><divclass="caption"><p>Looking Into The Future</p></div></div>Solution 2:
You have a lot of deprecated stuff in your HTML. Don't use all this link, text stuff in your body. And not <center> or <font> otherwise. I made a simple snippet of the stuff your wanted with flexbox. I modified your code a bit. You can find browser support for flexbox here: http://caniuse.com/#search=flexbox
body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.transbox {
position: relative;
flex: 1050%;
width: 50%;
margin: 0;
padding: 0;
}
.transbox.thumbnail {
display: block;
position: absolute;
width: 100px;
height: 75px;
}
.transbox:nth-of-type(1) .thumbnail {
bottom: 0;
right: 0;
}
.transbox:nth-of-type(2) .thumbnail {
bottom: 0;
left: 0;
}
.transbox:nth-of-type(3) .thumbnail {
top: 0;
right: 0;
}
.transbox:nth-of-type(4) .thumbnail {
top: 0;
left: 0;
}
.transboximg {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
float: left;
margin: 0;
padding: 0;
border: 0;
}
.transbox.text {
position: absolute;
width: 100%;
text-align: center;
color: #FFFFFF;
}<divclass="wrapper"><divclass="transbox"><imgsrc="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" /><divclass="thumbnail"><imgsrc="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" /></div><divclass="text"><p>Looking Into The Future</p></div></div><divclass="transbox"><imgsrc="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" /><divclass="thumbnail"><imgsrc="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" /></div><divclass="text"><p>Looking into the future</p></div></div><divclass="transbox"><imgsrc="https://s18.postimg.org/acomst9gp/image.jpg" /><divclass="thumbnail"><imgsrc="https://s18.postimg.org/acomst9gp/image.jpg" /></div><divclass="text"><p>Looking Into The Future</p></div></div><divclass="transbox"><imgsrc="https://s13.postimg.org/8yima8xvb/Construction.jpg" /><divclass="thumbnail"><imgsrc="https://s13.postimg.org/8yima8xvb/Construction.jpg" /></div><divclass="text"><p>Looking Into The Future</p></div></div></div>Solution 3:
Hope this is what you were looking for
<!DOCTYPE html><html ><head><styletype="text/css">
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.item {
position: relative;
float: left;
border: 1px solid #333;
overflow: hidden;
width: 50%;
height: 50%
}
.itemimg {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item:hoverimg {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
h1 {
color: white;
margin: 0;
padding: 20px;
}
html, body { height: 100%; padding: 0; margin: 0; }
</style></head><body><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1"><divclass="grow"style=" width: 40%; position: fixed; top: 50%; left: 50%; margin-top: -100px; margin-left: -10%;"><div><imgclass=" align:center"; src="https://s14.postimg.org/6ufixiest/Logo.jpg"width="100%" /></div></div><divclass="item"><imgsrc="http://vindhyaassociates.com/wp-content/uploads/2016/09/IT-1.jpg"alt="pepsi"><divclass="item-overlay top"></div></div><divclass="item"><imgsrc="http://vindhyaassociates.com/wp-content/uploads/2016/09/RealEstate1.jpg"alt="pepsi" ><divclass="item-overlay top"></div></div><divclass="item"><imgsrc="http://vindhyaassociates.com/wp-content/uploads/2016/09/VentureCapital-1.jpg"alt="pepsi" ><divclass="item-overlay top"></div></div><divclass="item"><imgsrc="http://vindhyaassociates.com/wp-content/uploads/2016/09/Construction-1.jpg"alt="pepsi" ><divclass="item-overlay top"></div></div><divstyle=" width: 20%; position: fixed; top: 25%; left: 25%; margin-top: -100px; margin-left: -10%;"><div><h1id="text">
Construction/Interior Design - Build to Live
</h1></div></div><divstyle=" width: 20%; position: fixed; top: 25%; left: 75%; margin-top: -100px; margin-left: -10%;"><div><h1id="text">
Real Estate - Buy and Sell Potential Properties
</h1></div></div><divstyle=" width: 20%; position: fixed; top: 75%; left: 25%; margin-top: -100px; margin-left: -10%;"><div><h1id="text">
Information Technology - Handling Potential IT Projects
</h1></div></div><divstyle=" width: 20%; position: fixed; top: 75%; left: 75%; margin-top: -100px; margin-left: -10%;"><div><h1id="text">
Venture Capital - Finance for High Growth Potential
</h1></div></div><divclass="grow"style=" width: 20%; position: fixed; top: 50%; left: 50%; margin-top: -100px; margin-left: -10%;"><div><imgclass=" align:center"; src="https://s14.postimg.org/6ufixiest/Logo.jpg"width="100%" /></div></div></body></html>
Post a Comment for "How To Align 4 Images As 2*2 In Html?"