Преобразование CSS не работает с сеткой CSS, проблема позиционирования элементов - PullRequest
Новая
       41

Преобразование CSS не работает с сеткой CSS, проблема позиционирования элементов

0 голосов
/ 27 сентября 2018

Я пытаюсь применить CSS transform к своим элементам сетки, поэтому :hover я получаю хороший переход на границах.

Я делаю что-то не так, скорее всего, с позиционированием элементов и сетки, поэтому она не работает.

Когда применяется преобразование scaleX, границы исчезают и не отображаются должным образом при наведении курсора.

.work {
	background: var(--white);
}
.work-wrapper {
	max-width: 1170px;
	padding: 1em;
	margin: auto;
	display: grid;
	grid-template-columns:repeat( auto-fill, minmax(260px, 1fr) );
	grid-row-gap: 30px;
	grid-column-gap: 15px;
	place-items: center start;
	background: #333;
}
.work-item {
	height:180px;
	width:260px;
	position: relative;
	background: var(--lilavo);
	margin: auto;
  box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.4);
}
.item::before {
	content: '';
	position: absolute;
	top: 10px;
	left: 10px;
	right:10px;
	bottom: 10px;
	border-top: 1px solid var(--white);
	border-bottom: 1px solid var(--white);
	transition: 0.5s;
	-webkit-transform:scaleX(0);
    -moz-transform:scaleX(0);
    -ms-transform:scaleX(0);
    -o-transform:scaleX(0);
    transform:scaleX(0);
	opacity: 0;
}
.item::before:hover {
	-webkit-transform:scaleX(1);
    -moz-transform:scaleX(1);
    -ms-transform:scaleX(1);
    -o-transform:scaleX(1);
    transform:scaleX(1);
		opacity: 1;
}
<section id="work" class="work">
      <h2>Work</h2>
      <div class="work-wrapper">
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
      </div>
    </section>

1 Ответ

0 голосов
/ 27 сентября 2018

Используйте селектор .item и .work-item:hover > .item вместо .item::before и .item::before:hover соответственно.Это будет работать!:) 

.work {
	background: var(--white);
}
.work-wrapper {
	max-width: 1170px;
	padding: 1em;
	margin: auto;
	display: grid;
	grid-template-columns:repeat( auto-fill, minmax(260px, 1fr) );
	grid-row-gap: 30px;
	grid-column-gap: 15px;
	place-items: center start;
	background: #333;
}
.work-item {
	height:180px;
	width:260px;
	position: relative;
	background: var(--lilavo);
	margin: auto;
  box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.4);
}
.item {
	content: '';
	position: absolute;
	top: 10px;
	left: 10px;
	right:10px;
	bottom: 10px;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	transition: 0.5s;
	-webkit-transform:scaleX(0);
    -moz-transform:scaleX(0);
    -ms-transform:scaleX(0);
    -o-transform:scaleX(0);
    transform:scaleX(0);
	opacity: 0;
}
.work-item:hover > .item {
	-webkit-transform:scaleX(1);
    -moz-transform:scaleX(1);
    -ms-transform:scaleX(1);
    -o-transform:scaleX(1);
    transform:scaleX(1);
		opacity: 1;
}
<section id="work" class="work">
      <h2>Work</h2>
      <div class="work-wrapper">
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
      </div>
    </section>

Вы также можете проверить это здесь .. https://jsfiddle.net/nimittshah/tj95b6kL/

...