I'm trying to get text to appear when you hover over the parent container (while the parent container gets opacity 0.5), but for some reason it won't appear. I've tried three or four different methods, but it won't appear no matter what :((

Below is my current code. Thanks everyone!

HTML:
<!--Parent class-->
<div class="project">
    <div class="project-text">
         <!--other things in here-->
         <!--This is the text I want hidden and then to appear upon hover-->
         <h2 class="view-project">View Project</h2>
    </div>
</div>

CSS:
.project{
    position: relative;
    transition: all 0.2s ease-in-out;
}
.project:hover{
    opacity: 0.5;
}
.view-project{
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
}
.project:hover .view-project{
    visibility: visible;
    opacity: 1;
}

CodePudding user response：

Everything seems to be working accordingly. I went ahead and added font-weight: bold; to make sure I could see the hover content come through. Also, I noted out the opacity transition on hover so that it didn't have any odd effects when double-checking.

.project{
    position: relative;
    transition: all 0.2s ease-in-out;
    height: 50vh;
    width: 50vw;
}
.project:hover{
    /* opacity: 0.5; */
}
.view-project{
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
}
.project:hover .view-project{
    visibility: visible;
    opacity: 2;
    font-weight: bold;
}

<!--Parent class-->
<div class="project">
    <div class="project-text">
         <!--other things in here-->
         <p>other things in here</p>
         <!--This is the text I want hidden and then to appear upon hover-->
         <h2 class="view-project">View Project</h2>
    </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Furthermore, I changed your parent container project to have a 50vw / 50vh viewport so that the actual word "View Project" was still clickable and didn't disappear when scrolling off the parent container.

CodePudding user response：

You need to set width and height to .project class selector to shows the hover effect. That's it.

.project{
  width: 100%;
  height: 150px;
  position: relative;
  transition: all 0.2s ease-in-out;
}
.project:hover{
    opacity: 0.5;
}
.view-project{
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
}
.project:hover .view-project{
    visibility: visible;
    opacity: 1;
}

<!--Parent class-->
<div class="project">

    <div class="project-text">
         hover here
         <!--other things in here-->
         <!--This is the text I want hidden and then to appear upon hover-->
         <h2 class="view-project">View Project</h2>
    </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>