Неправильные плавающие изображения - PullRequest
Новая
       39

Неправильные плавающие изображения

1 голос
/ 30 марта 2020

Я пытаюсь поиграть с эффектами наведения, но у меня возникла проблема. Я пытаюсь поместить 6 изображений рядом друг с другом в две колонки. Но это не отображается правильно. Я хочу, чтобы они отображались рядом, но отображаются только первые два. Остальные четыре ниже друг друга. Не могли бы вы мне помочь, пожалуйста? :) 

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>

1 Ответ

0 голосов
/ 30 марта 2020

замените HTML на 

    <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>

и css на 

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);
  }
}

Я использовал сетку с колонкой, у вас слишком много делений что почти сделало это невозможным, также некоторые из ваших ссылок были неясны, где они были размещены, поэтому вам может понадобиться добавить пару из них снова, но теперь у вас должно быть все 6 изображений в 2 столбцах, между ними есть пробел из-за к размеру изображений, вам нужно будет поиграться с этим

...