3
Would that be it?
To increase the size of the gallery, just increase the size to <div id="galeria">
And remembering that the selector not
excludes an element of the selection as, all blocks have the same size, except one, so I applied to all the same rule, except for the larger block, and therefore the use of the :not(.img01)
I hope I’ve helped
#galeria{
width:300px;
height:300px;
box-shadow:4px 4px 4px #ccc;
}
#galeria .img01{
height:66.66%;
width:66.66%;
float:left;
box-shadow:inset 4px 4px 4px #ccc;
}
#galeria div:not(.img01){
height:33.33%;
width:33.33%;
box-shadow:inset 4px 4px 4px #ccc;
float:left;
}
<div id="galeria">
<div class="img01"></div>
<div class="img02"></div>
<div class="img03"></div>
<div class="img04"></div>
<div class="img05"></div>
<div class="img06"></div>
</div>
And down here another example, with margin, and shadow out. As you left no code. I’ll leave the two examples:
#galeria{
width:300px;
height:300px;
}
#galeria .img01{
height:65%;
width:65%;
float:left;
box-shadow:0px 0px 20px #747474;
}
#galeria div:not(.img01){
height:32%;
width:32%;
box-shadow:0px 0px 20px #747474;
float:left;
}
.img02,.img03{ margin-left:1%; margin-bottom:1%;}
.img05{margin:0 1%;}
<div id="galeria">
<div class="img01"></div>
<div class="img02"></div>
<div class="img03"></div>
<div class="img04"></div>
<div class="img05"></div>
<div class="img06"></div>
</div>
Would these blocks be the images? Want to do the same in css?
– LocalHost
The code of the one you already tried was missing. Edit the question and include it as well.
– Renan Gomes
@Localhost, that’s what it is :)
– Murilo Melo
@Renan, that’s it, I want to know how I’ll do it, I tried it in a few simple ways using
position
and such, but I could not, so I would like to learn from scratch the same :)– Murilo Melo