CSS HOVER на изображении с использованием CSS сетки анимации - PullRequest
Новая
       33

CSS HOVER на изображении с использованием CSS сетки анимации

2 голосов
/ 28 июня 2019

Хотите эффект наведения на проект раздела портфолио.

Макет составлен из CSS Grid, и при наведении на него ссылка для просмотра Live Demo должна выглядеть отзывчивой. Анимационный переход

Пробовал, но эффект зависания, но испортил макет.

Он должен использовать только анимацию при наведении курсора css и НЕТ Javascript.

Эффект при наведении, чтобы отобразить ссылку.

@ DylanScript дал решение, но не сработало. Прикрепленное изображение enter image description here

Второе изображение для справки enter image description here

* {
  box-sizing: border-box;
}

body {
  height: 100%;
  margin: 0;
  line-height: 1.5;
}

a {
  color: #fff;
  text-decoration: none;
}

.projects {
  display: grid;
  grid-gap: 0.7rem;
  grid-template-columns: repeat(3, 1fr);
}

.projects img {
  width: 100%;
  border: 3px #fff solid;
}

.projects img:hover {
  opacity: 0.5;
}

.infobar {
  cursor: default;
  font-size: 0.9rem;
  font-weight: lighter;
  padding: 10px;
  text-align: left;
  width: 100%;
  height: 30%;
  position: absolute;
  bottom: -30%;
  transition: .3s ease-in-out;
  background: #413a44;
}

.infobar p {
  opacity: 0;
  margin: 0;
  transition: .6s ease-in-out;
}

.item:hover .infobar {
  bottom: 0%;
}

.viewBar:hover p {
  opacity: 1;
}

.viewBar img {
  position: absolute;
  left: 0;
  bottom: 0%;
  transition: .32s ease-in-out;
}

.viewBar:hover img {
  bottom: 30%;
}

.item:hover {
  transform: scale(1.01);
  filter: grayscale(0.6);
}

@media screen and (min-width: 1171px) {
  .projects {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (min-width: 769px) and (max-width: 1170px) {
  .projects {
    grid-template-columns: repeat(3, 1fr);
  }
}
<nav>

</nav>
<main>
  <div class="projects">
    <div class="item viewBar">
      <a href="#">
        <img src="https://source.unsplash.com/1600x899/?water">
      </a>
      <div class="infobar">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
          <a href="#" class="btn-light">
                            Demo...
                        </a>
        </p>
      </div>
    </div>
    <div class="item viewBar">
      <a href="#">
        <img src="https://source.unsplash.com/1600x899/?water">
      </a>
      <div class="infobar">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
          <a href="#" class="btn-light">
                            Demo...
                        </a>
        </p>
      </div>
    </div>

    <div class="item viewBar">
      <a href="#">
        <img src="https://source.unsplash.com/1600x899/?water">
      </a>
      <div class="infobar">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
          <a href="#" class="btn-light">
                            Demo...
                        </a>
        </p>
      </div>
    </div>


  </div>

</main>

<footer>

</footer>

Ответы [ 2 ]

0 голосов
/ 28 июня 2019

Ваши position и margin-bottom являются причинами проблемы.

update 

.infobar {
  cursor: default;
  font-size: 0.9rem;
  font-weight: lighter;
  padding: 10px;
  text-align: left;
  width: 100%;
  height: 30%;
  position: relative;
  transition: .3s ease-in-out;
  background: #413a44;
}

.viewBar img {
  position: relative;
  left: 0;
  bottom: 0;
  transition: .32s ease-in-out;
}

remove 

.viewBar:hover img {
  bottom: 30%;
}

UPDATED

установите вашу позицию .item на relative

.item{
    position: relative;
}

, затем .infobar на absolute.Я также изменил height margin-bottom padding, чтобы достичь желаемого эффекта 

.infobar {
  cursor: default;
  font-size: 0.9rem;
  font-weight: lighter;
  text-align: left;
  width: 100%;
  /* updates */  
  height: 0;
  position: absolute;
  z-index: 1;
  bottom: 0;
  /* end updates */  
  transition: .3s ease-in-out all;
  background: #413a44;
}

Затем на .item:hover

.item:hover .infobar {
  height: 30%;
}

измените продолжительность transition назначения p до .3s такие же, как .infobar для получения более плавного эффекта. 

.infobar p {
  opacity: 0;
  margin: 0;
  transition: .3s ease-in-out;
}

Надеюсь, это поможет.

здесь ручка https://codepen.io/crazychukz/pen/VJyOJj

0 голосов
/ 28 июня 2019

Проблема в position: absolute на img и .infobar, при применении position: relative анимации работают правильно: 

.viewBar img {
  position: relative; ##########
  left: 0;
  bottom: 0%;
  transition: .32s ease-in-out;
}

.infobar {
  cursor: default;
  font-size: 0.9rem;
  font-weight: lighter;
  padding: 10px;
  text-align: left;
  width: 100%;
  height: 30%;
  position: relative; ###########
  bottom: -30%;
  transition: .3s ease-in-out;
  background: #413a44;
}

Надеюсь, это поможет

...