I have this code here:
#mg1 {
margin-left: 3%;
}
#mg1:hover {
margin-top: 4%;
}
<div id="section1">
<center>
<div id="bgp">
<center>
<p>THUMBNAILS</p>
</center>
</div>
</center>
<br>
<img src="321321321321.png" width="200" height="150" id="mg1">
<img src="ewqfh.png" width="200" height="150" id="mg2">
<img src="2321321.png" width="200" height="150" id="mg3">
</div>
The hover effect should only affect the image with the id="mg1", but instead it affects all my images; Why is this happening?
#mg1{
margin-left:3%;
position:relative;
}
#mg1:hover{
margin-top:4%;
}
img{
float:left;
}
<div id="section1">
<center><div id="bgp"><center><p>THUMBNAILS</p></center></div></center><br>
<img src="321321321321.png" width="200" height="150" id="mg1">
<img src="ewqfh.png" width="200" height="150" id="mg2">
<img src="2321321.png" width="200" height="150" id="mg3">
</div>
#section1{
position:relative;
}
#mg1,#mg2,#mg3{
position:absolute;
}
#mg1{
margin-left:3%;
}
#mg2{
top:200px;
}
#mg3{
left:200px;
}
#mg1:hover{
margin-top:15%;
transition:2s linear;
}
<div id="section1">
<center><div id="bgp"><center><p>THUMBNAILS</p></center></div></center><br>
<div id="mg1">
<img src="http://www.freeiconspng.com/uploads/green-humming-bird-png-4.png" width="200" height="150" ></div>
<div id="mg2"> <img src="http://www.freeiconspng.com/uploads/guitar-icon-png-18.jpg" width="200" height="150" ></div>
<div id="mg3"> <img src="http://www.imagenspng.com.br/wp-content/uploads/2015/02/super-mario-03.png" width="200" height="150" ></div>
</div>
Apply position:relative and z-index:1 to #mg1. and use top and left properties instead of margins, and instead of percentages, use vh and vw if your parent element is too small.
SNIPPET
#section1 {
height: 600px;
width: 800px;
}
#mg1:hover {
position: relative;
top: 4vh;
left: 3vw;
z-index: 1;
}
<div id="section1">
<center>
<div id="bgp">
<center>
<p>THUMBNAILS</p>
</center>
</div>
</center>
<br>
<img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" width="200" height="150" id="mg1">
<img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" width="200" height="150" id="mg2">
<img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" width="200" height="150" id="mg3">
</div>
<!DOCTYPE html>
<html>
<head>
<style>
#mg1 {
margin-left: 3%;
}
#mg1:hover {
margin-top: 4%;
}
img{
position: relative;
float : left;
}
}
</style>
</head>
<body>
<div id="section1">
<center>
<div id="bgp">
<center>
<p>THUMBNAILS</p>
</center>
</div>
</center>
<br>
<img src="321321321321.png" width="200" height="150" id="mg1">
<img src="ewqfh.png" width="200" height="150" id="mg2">
<img src="2321321.png" width="200" height="150" id="mg3">
</div>
</body>
</html>
Related
I am working on a website, and I would like to align 4 circles in the center of the content area. The example can be found at invisionbilling.com/stackoverflow. I have something right now that does the job, but I know there will be issues with different window sizes, different picture sizes, etc. How do I set the height of the div container to automatically wrap around the 4 circles/images? Is there a way to automatically center it using margin-left and margin-right? I tried "auto" for all of these and it wasn't doing the job. Thanks!
HTML
<div class="wrapper">
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Lower-Costs-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-358" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Greater-Cash-Flow-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-363" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Increased-Revenue-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-364" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Emphasis-on-Patient-Care-300x300.png" alt="" width="150"
height="150" class="alignnone size-medium wp-image-361" />
</div>
</div>
CSS
.circles {
display: block !important;
float: left !important;
margin: 10px !important;
}
.wrapper {
height: 175px;
width: 100%;
margin-left: 225px;
}
Try flexbox instead of floating, and try never to use !important:
<!DOCTYPE html>
<html>
<head>
<style>
.circles {
margin: 10px;
}
.wrapper {
height: 175px;
width: 100%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Lower-Costs-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-358" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Greater-Cash-Flow-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-363" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Increased-Revenue-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-364" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Emphasis-on-Patient-Care-300x300.png" alt="" width="150"
height="150" class="alignnone size-medium wp-image-361" />
</div>
</div>
</body>
</html>
I have a parent Div center align in the page and the content is dynamic added to the parent Div based on the result.
The parent div is 100% wide and center in the page and expect the result should be
_______________________________________
| [Image] [Image] [Image] |
| [text ] [text ] [text ] |
| [Image] [Image] |
| [text ] [text ] |
But the result is
_______________________________________
| [Image] [Image] [Image] |
| [text ] [text ] [text ] |
| [Image] [Image] |
| [text ] [text ] |
.row {
width: 100%;
text-align: center;
}
.block {
display:inline-block;
margin-left: 10px;
}
.block img {
display:block;
}
.block span {
width : 100%;
text-align: center;
}
<div class="row">
<div class="block" width="320" height="200">
<img src="a.jpg"></img>
<span>a.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="b.jpg"></img>
<span>b.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="c.jpg"></img>
<span>c.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="d.jpg"></img>
<span>d.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
</div>
I used an extra container around the images. The container itself will be in the center of the page using auto margin for the left and right side.
The images are positioned using flexbox which is responsive by default.
Class .block has text-align: center; to put the text correctly below the image.
I removed the </img> tags since they are incorrect.
.row {
width: 100%;
}
.block {
display: inline-block;
margin-left: 10px;
text-align: center;
}
.block img {
display: block;
}
.block span {
width: 100%;
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
width: 80%;
margin: 0 auto;
}
<div class="row">
<div class="container">
<div class="block" width="320" height="200">
<img src="http://via.placeholder.com/150x150">
<span>a.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="http://via.placeholder.com/150x150">
<span>b.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="http://via.placeholder.com/150x150">
<span>c.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="http://via.placeholder.com/150x150">
<span>d.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="http://via.placeholder.com/150x150">
<span>e.jpg</span>
</div>
</div>
</div>
You are aligning the content with the text-align: center; tag which always will center the elements, if you want them to align to a side you should use float: left;.
Hope it helps.
You can achieve your desired result with the following code.
<div class="row">
<div class="block" width="320" height="200">
<img src="a.jpg"></img>
<span>a.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="b.jpg"></img>
<span>b.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="c.jpg"></img>
<span>c.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="d.jpg"></img>
<span>d.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
</div>
.row {
width: 100%;
text-align: center;
}
.wrap {
display: inline-block;
text-align: left;
}
.block {
display:inline-block;
margin-left: 10px;
}
.block img {
display:block;
}
.block span {
width : 100%;
text-align: center;
}
For row class correct css as below:
.row {
width: 100%;
}
add css below:
.block {width: 33.33%;float: left;text-align: center;}
.block img {display: block;margin: auto;} & .block span{display: block;}
You can try row text-align: center; to change text-align: left;
HTML:
.row {
width: 100%;
text-align: left;
}
.block {
display:inline-block;
margin-left: 10px;
}
.block img {
display:block;
}
.block span {
width : 100%;
text-align: center;
}
<div class="row">
<div class="block" width="320" height="200">
<img src="a.jpg"></img>
<span>a.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="b.jpg"></img>
<span>b.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="c.jpg"></img>
<span>c.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="d.jpg"></img>
<span>d.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
</div>
I am building a website: http://akce.region-tour.cz/ahoj-vsichni/
If you scroll down, you will see 4 boxes (pictures with a link above). Every image is on a different row now. What I want to do is to style It, so there are two rows and each row has two boxes (see picture)
THIS IS HOW I WANT IT
<div style="width: 400px;">Krkonoše<img class="alignleft size-full wp-image-131" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/krkonose.jpg" alt="Krkonoše" width="400" height="150" /></div>
<div style="width: 400px;">Lužické hory<img class="size-full wp-image-132 alignleft" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/luzicke-hory.jpg" alt="Lužické hory" width="400" height="150" /></div>
<div style="width: 400px;">Krkonoše<img class="alignleft size-full wp-image-133" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/orlicke-hory.jpg" alt="orlické hory" width="400" height="150" /></div>
<div style="width: 400px;">Jizerské hory<img class="alignleft size-full wp-image-130" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/jizerky.jpg" alt="Jizerské hory" width="400" height="150" /></div>
you would make two rows, and each row has a right and left div
.row {
float:left;
width:100%;
margin:1em 0;
}
.row .left {
width:48%;
float:left;
}
.row .right {
width:48%;
float:right;
}
<div class="row">
<div class="left">img here</div>
<div class="right">img here</div>
</div>
<div class="row">
<div class="left">img here</div>
<div class="right">img here</div>
</div>
my above example is clean html and css and fully responsive.
There are numerous solutions and #HollerTrain provides a clean one. Here is a different solution using CSS3 flexbox which I find to be an excellent construct for providing flexible layouts.
CSS
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 850px;
}
.flex-container div {
width: 400px;
height: 160px;
margin: 10px;
}
HTML
<div class="flex-container">
<div style="width: 400px;">Krkonoše<img class="alignleft size-full wp-image-131" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/krkonose.jpg" alt="Krkonoše" width="400" height="150" /></div>
<div style="width: 400px;">Lužické hory<img class="size-full wp-image-132 alignleft" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/luzicke-hory.jpg" alt="Lužické hory" width="400" height="150" /></div>
<div style="width: 400px;">Krkonoše<img class="alignleft size-full wp-image-133" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/orlicke-hory.jpg" alt="orlické hory" width="400" height="150" /></div>
<div style="width: 400px;">Jizerské hory<img class="alignleft size-full wp-image-130" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/jizerky.jpg" alt="Jizerské hory" width="400" height="150" /></div>
</div>
Fiddle
<html>
<head>
<style>
.row{
width:100%;
float:left;
margin:0 auto;
}
.colum1{
width:48%;
float:left;
margin:0 auto;
}
.colum2{
width:48%;
float:right;
margin:0 auto;
}
.colum3{
width:48%;
float:left;
margin:0 auto;
}
.colum4{
width:48%;
float:right;
margin:0 auto;
}
</style>
</head>
<body>
<div class="row">
<div class="colum1">
content here..
</div>
<div class="colum2">
content here..
</div>
<div class="colum3">
content here..
</div>
<div class="colum4">
content here..
</div>
</div><!-- ./row -->
</body>
</html>
I would like to know how to edit this code to show these pictures centered side by side with each download button centered and underneath each picture, If anybody knows how to edit the code to this, it would be appreciated. Thanks.
The website link that I uploaded the code to, to test it can be seen below:
http://www.tekmillion.com/albums.html
.clearfix {
clear: both;
}
.divWithBtn {
float: left;
text-align: center;
padding: 10px;
}
.divWithBtn img,
.divWithBtn a{
display: block;
margin: 0 auto;
}
<HR>
<div class="container">
</br>
<span class="textformat1"><center><b>Albums</b></span></center>
</br>
<center>
<div class="clear">
<div class="divWithBtn">
<img src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover" width="200" height="200">
<a href="LONDON%202%20TURKEY%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT%20COVER).jpg" alt="LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT %20COVER)" width="200" height="200" border:none;>
<a href="LONDON%202%20TURKEY%20VOL.2.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/Love%20%26%20Hate%20Volume.1%20(Front%20Cover).JPG" alt="Love%20%26%20Hate%20Volume.1%20(Front %20Cover)" width="200" height="200">
<a href="LOVE%20%26%20HATE%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/Gurbet%20Eli%20Volume.1%20(Front%20Cover).JPG" alt="Gurbet%20Eli%20Volume.1%20(Front%20Cover)" width="200" height="200">
<a href="GURBET%20ELI%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
</div>
</center>
</br>
Add following css to your code:
This css will make image side by side.
.divWithBtn {
display: inline-block;
}
Following css will make download button below the image.
.divWithBtn > a {
display: block;
}
Hope it helps.
Note: And your current css which you post here is not applied. Make sure it is applied to your html element. Check path for your css file.
add class "display_table" to outer div.
<div class="clear" class="display_table">
add styles for the class "divWithBtn"
.divWithBtn {
float:left;
text-align:center;
margin: 0px 20px;
}
And finally add div to the image tag
<div><img height="200" width="200" src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover"></div>
Finall output
<div class="clear" class="display_table">
<div class="divWithBtn">
<div><img height="200" width="200" src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover"></div>
<img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
<div class="divWithBtn">
<div> <img height="200" width="200" src="images/LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT%20COVER).jpg" alt="LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT %20COVER)" border:none;=""></div>
<img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
<div class="divWithBtn">
<div><img height="200" width="200" src="images/Love%20%26%20Hate%20Volume.1%20(Front%20Cover).JPG" alt="Love%20%26%20Hate%20Volume.1%20(Front %20Cover)"></div>
<img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
<div class="divWithBtn">
<div><img height="200" width="200" src="images/Gurbet%20Eli%20Volume.1%20(Front%20Cover).JPG" alt="Gurbet%20Eli%20Volume.1%20(Front%20Cover)">
<div> <img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
</div>
</div>
</div>
Css
.display_table { display: table; }
.divWithBtn { float: left; text-align: center; margin: 0px 20px; }
Having some trouble trying to put together a page where images are placed properly. Screen shot attached of what I currently have in place now. What I am trying to get to would look like the first row of images (1-5) all the way down the page with every other row opposite, if that makes sense. Images 1-8 are set up correctly but 9-10 are on row 3 rather than on row 2 where I would like them. Image 11 should be left side and 12-15 should be right side. And so on..
Current css –
#grid { float: left; width: 100%; overflow: hidden; }
#grid-inner { float: left; width: 890px; overflow: hidden; }
.item { float: left; margin: 0 0 10px 0; position: relative; }
.item span { display: none; position: absolute; padding: 0 0 0 0; color: #fff; background: transparent url('../images/back-work.png') 0 0 repeat; }
.item span a { color: #fff; display: block; height: 100%; width: 100%; }
.small { width: 210px; height: 125px; }
.large { width: 420px; height: 260px; }
.small span { width: 210px; height: 125px; padding: 0 0 0 0; }
.large span { width: 420px; height: 260px; padding: 0 0 0 0; }
#project { float: left; width: 100%; }
#project-content { float: left; width: 100%; border-top: 1px solid #ccc; margin: 0 0 0 0; padding: 0 0 0 0; }
#project-content-alpha { float: left; width: 200px; }
#project-content-beta { float: left; width: 410px; }
#project-content-gamma { float: right; width: 200px; text-align: right; }
#project-content-alpha span.light { color: #999; }
#project-images { float: left; width: 100%; }
#project-images img { float: left; width: 100%; margin: 0 0 0 0; }
#project-pagination { float: left; width: 100%; margin: 0 0 0 0; }
#project-pagination-alpha { float: left; width: 200px; }
#project-pagination-beta { float: right; width: 200px; text-align: right; }
Current markup –
<div id="grid">
<div id="grid-inner">
<div class="item large">
<span>ONE</span>
<img src="" width="420" height="260" alt="ONE" />
</div>
<div class="item small">
<span>TWO</span>
<img src="" width="210" height="125" alt="TWO" />
</div>
<div class="item small">
<span>THREE</span>
<img src="" width="210" height="125" alt="THREE" />
</div>
<div class="item small">
<span>FOUR</span>
<img src="" width="210" height="125" alt="FOUR" />
</div>
<div class="item small">
<span></span>
<img src="" width="210" height="125" alt="FIVE" />
</div>
<div class="item small">
<span></span>
<img src="" width="210" height="125" alt="SIX" />
</div>
<div class="item small">
<span></span>
<img src="" width="210" height="125" alt="SEVEN" />
</div>
<div class="item large">
<span></span>
<img src="" width="420" height="260" alt="EIGHT" />
</div>
Any help or suggestions on this would be appreciated.
Thanks in advance!
CSS floats don't reposition the elements vertically. They only float horizontally.
If you want vertical "floats" (i.e. tiling), you will need to use JavaScript. I recommend the jQuery Masonry Plugin or Vanilla Masonry (jQuery Masonry minus the jQuery).
Check out the interface here. Let me know if you need revisions.
EXACTLY WHAT WAS ASKED FOR - http://jsfiddle.net/rxLTG/
HTML
<div class="wrap">
<div class="row">
<img class="lg" src="" alt="1" />
<img class="sm" src="" alt="2" />
<img class="sm" src="" alt="3" />
<img class="sm" src="" alt="4" />
<img class="sm" src="" alt="5" />
</div>
<div class="row">
<img class="sm" src="" alt="6" />
<img class="sm" src="" alt="7" />
<img class="lg" src="" alt="8" />
<img class="sm" src="" alt="9" />
<img class="sm" src="" alt="10" />
</div>
</div>
CSS
.wrap {width:650px;}
.wrap img {float:left; width:150px; height:100px;}
.wrap img.lg {width:350px; height:200px;}
.row.odd .lg, .row:nth-child(even) .lg {float:right;}
JS
$(function () {
$('.row:odd').addClass('odd');
});
A better way would be like this - http://jsfiddle.net/rxLTG/2/
HTML
<div class="wrap">
<img class="lg" src="" alt="1" />
<img class="sm" src="" alt="2" />
<img class="sm" src="" alt="3" />
<img class="sm" src="" alt="4" />
<img class="sm" src="" alt="5" />
<img class="lg2" src="" alt="6" />
<img class="sm" src="" alt="7" />
<img class="sm" src="" alt="8" />
<img class="sm" src="" alt="9" />
<img class="sm" src="" alt="10" />
<img class="lg" src="" alt="11" />
<img class="sm" src="" alt="12" />
<img class="sm" src="" alt="13" />
<img class="sm" src="" alt="14" />
<img class="sm" src="" alt="15" />
<img class="lg2" src="" alt="16" />
<img class="sm" src="" alt="17" />
<img class="sm" src="" alt="18" />
<img class="sm" src="" alt="19" />
<img class="sm" src="" alt="20" />
</div>
CSS
.wrap {width:500px;}
.wrap img {float:left; width:125px; height:100px;}
.wrap img.lg {width:250px; height:200px;}
.wrap img.lg2 {width:250px; height:200px;float:right;}
Theres no need to define each row inside a div, because they will automatically fit and wrap round.
Also, if you float the large image on each row first (left or right), then the other four will fit into place without any javascript needed.
Every fifth number will then be a large image, (1,6,11,16,21 etc). If you want it to work javascript free, then use this solution. If you want to keep your original numbering system, then use the solution above.
You can just look at it as a grid. More markup, but reusable and responsive too.
For the example, you can handle this grid layout with a single class that takes the half of it's container.
first row :
- 1 column of 1/2 : has 1 large image
- 1 column of 1/2 : has 4 columns (1/2 each, and each containing a small image)
Second row : just reverse the first 1/2 columns
Columns are floated, so the col 4 and 5 will stack under 1 and 2... Your images, have to be at the right aspect ratio too.
And finally, since you're floating elements, clearfix the group.
Hope it helps.
/* Micro clearfix for the wrapper */
.wrap:before,
.wrap:after {
content: '';
display: table
}
.wrap:after {
clear: both;
}
.wrap { width:650px; }
/* no need for size if you put the right images */
img {
width:100%;
height: auto;
vertical-align: middle; /* removes the gap beneth the image */
}
/* you can go further and create some other columns */
.col-1-2 {
float: left;
width: 50%;
}
/* demo purpose only */
img {
width: 100%;
height: 100px;
}
img.lg { height: 200px; }
<div class="wrap">
<!-- one half of the wrapper -->
<div class="col-1-2">
<img class="lg" src="" alt="1" />
</div>
<!-- one half of the wrapper -->
<div class="col-1-2">
<!-- one half of the columns :: 1/4 -->
<div class="col-1-2">
<img class="" src="" alt="2" />
</div>
<div class="col-1-2">
<img class="" src="" alt="3" />
</div>
<div class="col-1-2">
<img class="" src="" alt="4" />
</div>
<div class="col-1-2">
<img class="" src="" alt="5" />
</div>
</div>
<!-- then reverse -->
<div class="col-1-2">
<div class="col-1-2">
<img class="" src="" alt="6" />
</div>
<div class="col-1-2">
<img class="" src="" alt="7" />
</div>
<div class="col-1-2">
<img class="" src="" alt="8" />
</div>
<div class="col-1-2">
<img class="" src="" alt="9" />
</div>
</div>
<div class="col-1-2">
<img class="lg" src="" alt="10" />
</div>
</div>