Slide a link to top on image hover - html

Question

I want to slide the plus icon link when the user hovers on the image. when the image isn't hovered I have placed the button outside of image and set the opacity: 0. then on hover I want it to slide in. so I'm setting the opacity: 1 and changing its positions. but on hover the link don't show up.
Any suggestions?
.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

The problem is this line:
.project .project:hover .view-link
You're referencing .project twice but there is only one mention of it in your HTML.
It should be:
.project:hover .view-link
Also, there was some missing HTML in your example code of which your CSS depended. I added two divs for #home-d and .projects-wrapper, respectively.
Demo
.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>