在图像悬停时将链接滑动到顶部

Question

当用户悬停在图像上时，我想滑动加号图标链接。当图像没有悬停时，我已经将按钮放置在图像外部并设置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/fff&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>

Answer 1

问题是这一行：

.project .project:hover .view-link

您引用了.project两次，但在HTML中只有一次提到它。

应该是：

.project:hover .view-link

此外，在您的CSS所依赖的示例代码中还缺少一些HTML。我分别为#home-d和.projects-wrapper添加了两个div。

演示

.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/fff&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>