Блог

Главная - Вопросы по программированию - Сдвиньте ссылку вверх при наведении курсора на изображение

Сдвиньте ссылку вверх при наведении курсора на изображение

#html #css #sass

#HTML #css #дерзость

Вопрос:

Я хочу сдвинуть ссылку на значок плюса, когда пользователь наводит курсор на изображение. когда изображение не зависает, я помещаю кнопку за пределы изображения и устанавливаю opacity: 0 . затем при наведении я хочу, чтобы она вставлялась. итак, я устанавливаю opacity: 1 и меняю его позиции. но при наведении курсора ссылка не отображается.

Есть предложения?

 .project {
  position: relative;
}

.project .image {
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.project .image::before {
  content: '';
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(100, 81, 246, 0.9);
  border-radius: 10px;
  -webkit-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
}

.project .image img {
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.15);
  width: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.project .image img:hover {
  -webkit-box-shadow: 0px 0px 65px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 65px 0px rgba(0, 0, 0, 0.2);
}

.project .project:hover,
.project .image:hover::before {
  opacity: 1;
}

.project .project:hover .view-link,
.project .image:hover .view-link {
  opacity: 1;
  top: 40%;
}

.project .view-link {
  position: absolute;
  top: 90%;
  left: 0;
  right: 0;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  opacity: 0;
  color: #fffefe;
  z-index: 1;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.project .view-link:hover {
  color: #cacaca;
}  
 <link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.15.0/css/all.css"
integrity="sha384-OLYO0LymqQ uHXELyx93kblK5YIS3B2ZfLGBmsJaUyor7CpMTBsahDHByqSuWW q"
crossorigin="anonymous"
/>
<div class="project">
  <div class="image">
    <img src="https://dummyimage.com/590x390/000/fffamp;text=Some Image" alt="" />
  </div>
  <a class="view-link" href="#">
    <i class="fas fa-plus-circle fa-3x"></i>
  </a>
  <h3>Lorem ipsum dolor sit amet.</h3>
</div>

Комментарии:

1. Где мы можем протестировать то, что вы уже сделали?

2. Позвольте мне тоже добавить css

3. @AndyHoffman обновил вопрос

Ответ №1:

Проблема в этой строке:

 .project .project:hover .view-link

Вы ссылаетесь .project дважды, но в вашем HTML есть только одно упоминание об этом.

Это должно быть:

 .project:hover .view-link

Кроме того, в вашем примере кода отсутствовал HTML, от которого зависел ваш CSS. Я добавил два divs для #home-d и .projects-wrapper , соответственно.

ДЕМОНСТРАЦИЯ

 .project {
  position: relative;
}

.project .image {
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.project .image::before {
  content: '';
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(100, 81, 246, 0.9);
  border-radius: 10px;
  -webkit-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
}

.project .image img {
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.15);
  width: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.project .image img:hover {
  -webkit-box-shadow: 0px 0px 65px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 65px 0px rgba(0, 0, 0, 0.2);
}

.project .project:hover,
.project .image:hover::before {
  opacity: 1;
}

.project:hover .view-link,
.project .image:hover .view-link {
  opacity: 1;
  top: 40%;
}

.project .view-link {
  position: absolute;
  top: 90%;
  left: 0;
  right: 0;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  opacity: 0;
  color: #fffefe;
  z-index: 1;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.project .view-link:hover {
  color: #cacaca;
}  
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css" integrity="sha384-OLYO0LymqQ uHXELyx93kblK5YIS3B2ZfLGBmsJaUyor7CpMTBsahDHByqSuWW q" crossorigin="anonymous" />

<div class="project">
  <div class="image">
    <img src="https://dummyimage.com/590x390/000/fffamp;text=Some Image" alt="" />
  </div>
  <a class="view-link" href="#">
    <i class="fas fa-plus-circle fa-3x"></i>
  </a>
  <h3>Lorem ipsum dolor sit amet.</h3>
</div>