Wrong floating images - html

Question

I am trying to play with hover effects but I got a problem. I am trying to put 6 images next to each other into two columns. But it is not displayed correctly. I want them to be displayed side by side but the only first two are displayed like that. The other four are below each other. Could you help me, please? :)
body {
color: #333;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
.column {
margin: 5px 5px 5px 5px;
padding: 0;
}
.column:last-child {
padding-bottom: 0px;
}
.column::after {
content: "";
/*clear: both;*/
display: inline;
float: left;
}
.column div {
position: relative;
float: left;
width: 375px;
height: 225px;
margin: 0 0 0 25px;
padding: 0;
}
.column div:first-child {
margin-left: 0;
}
.column div span {
float: left;
position: absolute;
bottom: -20px;
left: 0;
z-index: 0;
display: inline;
width: 375px;
margin: 0;
padding: 0;
color: #444;
font-size: 18px;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
opacity: 0;
}
figure {
width: 400px;
height: 250px;
margin-left: 10px;
margin-right: 10px;
padding: 0;
background: #fff;
overflow: hidden;
float: left;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}
/* Shine */
.hover14 figure {
position: relative;
}
.hover14 figure::before {
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: '';
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.hover14 figure:hover::before {
-webkit-animation: shine .75s;
animation: shine .75s;
}
#-webkit-keyframes shine {
100% {
left: 125%;
}
}
#keyframes shine {
100% {
left: 125%;
}
}
<h1>Vítej v Kasiho světě!</h1>
<p>Má nabídka toho, co umím, zvládám, čemu se věnuji a co chci šířit do světa. Stejně tak chci získávat zkušenosti další i úplně nové. Pojď se tady porozhlédnout a třeba se mi ozveš a navážeme spolupráci.</p>
<br />
<div class="hover14 column">
<div><a href="http://kasihosvet.g6.cz/o-mne/">
<figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/o-mne.png" /></figure></a></div>
<div class="hover14 column">
<div><a href="http://kasihosvet.g6.cz/trener-parkouru/">
<figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/parkour.png" /></figure></a></div> <a href="http://kasihosvet.g6.cz/editor-videa/">
<div class="hover14 column">
<div>
<figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/videoedit.png" /></figure></a></div> <a href="http://kasihosvet.g6.cz/webmaker/">
<br>
<div class="hover14 column">
<div>
<figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/webkamekr.png" /></figure></a></div> <a href="http://kasihosvet.g6.cz/grafika/">
<div class="hover14 column">
<div>
<figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/grafika.png"/></figure></a></div> <a href="http://kasihosvet.g6.cz/kontakt/">
<div class="hover14 column">
<div>
<figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/kontakt.png" /></figure></a></div>

Answer 1

replace your HTML with this
<h1>Vítej v Kasiho světě!</h1>
<p>Má nabídka toho, co umím, zvládám, čemu se věnuji a co chci šířit do světa. Stejně tak chci získávat zkušenosti další i úplně nové. Pojď se tady porozhlédnout a třeba se mi ozveš a navážeme spolupráci.</p>
<div class="hover14 column">
<div><a href="http://kasihosvet.g6.cz/o-mne/">
<figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/o-mne.png" /></figure></a></div>
<div><a href="http://kasihosvet.g6.cz/trener-parkouru/">
<figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/parkour.png" /></figure></a></div>
<div>
<figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/videoedit.png" /></figure></a>
</div>
<div><figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/webkamekr.png" /></figure></a></div>
<div><figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/grafika.png"/></figure></a></div>
<div><figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/kontakt.png" /></figure></a></div>
</div>
and css with this
body {
color: #333;
font-family: "Open Sans", sans-serif;
font-weight: 300;
}
.column {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
figure {
width: 400px;
height: 250px;
margin-left: 10px;
margin-right: 10px;
padding: 0;
background: #fff;
overflow: hidden;
float: left;
}
figure:hover + span {
bottom: -36px;
opacity: 1;
}
/* Shine */
.hover14 figure {
position: relative;
}
.hover14 figure::before {
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: "";
width: 50%;
height: 100%;
background: -webkit-linear-gradient(
left,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 100%
);
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 100%
);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.hover14 figure:hover::before {
-webkit-animation: shine 0.75s;
animation: shine 0.75s;
}
#-webkit-keyframes shine {
100% {
left: 125%;
}
}
#keyframes shine {
100% {
left: 125%;
}
}
#media (max-width: 750px) {
.column {
display: grid;
grid-template-columns: repeat(1, 1fr);
}
}
I have used the grid layout with the column, you had way too many divs which almost made it impossible, also some of your links were unclear where they were placed so you may need to add a couple of them in again, but you should now have all 6 images in 2 columns, there is a gap in between them due to the size of the images, you will need to play around with that