Does text disappear when hovered over in CSS?

Having some trouble getting a text to display on hover over the parent container while adjusting the opacity. Despite trying multiple methods, it just won't show up no matter what I do!

Here is my current code:

.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;
}
<!--Parent class-->
<div class="project">
    <div class="project-text">
         <!--other content here-->
         <!--Text supposed to be hidden and then shown on hover-->
         <h2 class="view-project">View Project</h2>
    </div>
</div>

htmlcsshover

Answer №1

Everything is functioning as expected. I decided to include font-weight: bold; to ensure that the hover content was visible. Additionally, I disabled the opacity transition on hover to avoid any unexpected effects.

.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>

Additionally, I updated your parent container project to have a 50vw / 50vh viewport so that the "View Project" text remains clickable and doesn't disappear when scrolling out of the parent container.

Answer №2

To achieve the hover effect, you simply need to specify the width and height for the .project class selector.

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trying to dynamically filter table cells in real time using HTML and jQuery

During my search on Stack Overflow, I successfully implemented a real-time row filtering feature. However, I now require more specificity in my filtering process. Currently, the code I am using is as follows: HTML: <input type="text" id="search" place ...

javascriptjqueryhtmlfilter

Adjusting HTML5 drag height while resizing the window

Code conundrum: var dragHeight = window.innerHeight - parseInt(jQuery("#drag_area").css("margin-top")) - 5;. It sets the drag height based on browser size, but there's a glitch. If I start with a non-maximized browser and then maximize it, the drag he ...

javascriptjquerycsshtml

Hiding a parent DIV in JS based on specific content: Here's how

I need help figuring out how to hide multiple parent DIVs based on the content of a specific child DIV. Here's an example: <div class="report-per-day"> <div class="report-day">26 May 2022</div> <div class=" ...

javascripthtml

I am experiencing some difficulty with the GetServerDate using the JSON protocol in JQuery; it's

I am facing an issue while trying to execute a basic ajax call to fetch data from a file on a server. Even though I can access the file via the web browser and have diligently followed tutorials related to this topic, I have hit a dead end. Here is the sn ...

javascriptjqueryhtmlajaxjson

Discovering the art of line breaks

Imagine I have a random block of text displayed in a single line, like this: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Due to various reasons such as width settings or text-zoom, the text may display as two or more lines on the viewer&apos ...

javascriptjqueryhtmldomtext

magnificPopup experiencing difficulties when attempting to invoke a class that is dynamically generated within the HTML document

Currently, I am encountering an issue with the magnificPopup. Whenever I try to trigger the popup using the class 'popup-with-zoom-anim', it doesn't seem to work as expected. Has anyone else faced a similar problem before? <body> < ...

javascriptjqueryhtmlajaxmagnific-popup

Is it possible to create a popup window that remains fixed at the top edge of the screen but scrolls along with the rest of the page if

In an attempt to organize my thoughts, I am facing a challenge with a search page similar to Google. The search results trigger a popup window when hovering over an icon, located to the right of the search results. Here is what I am looking to achieve with ...

javascriptcssajaxscrollpopup

Static CSS box positioned above dynamic scaling box

Let's Think About It <div id="foo"> Lorem ipsum </div> <div id="bar"> sit amet </div> Is there a way to maintain the size of foo as it is while allowing bar to fill the remaining space on the page when the window size cha ...

css

Bootstrap - Progress Bar Display

I have a mobile application that is built using Bootstrap 3. I am currently working on creating a responsive progress indicator for the app. This indicator will consist of three to five steps, each showing an icon, step name, and status. On mobile devices, ...

csstwitter-bootstrap

What strategies can I use to dynamically update the .active class in jquery so it doesn't only target the initial one?

Utilizing bootstrap for tab-fade functionality has been successful so far. However, I am facing an issue when trying to select multiple active classes instead of just one. My current JQuery code only changes the text in the first element with the "active" ...

javascriptjqueryhtmlcss

Which element is able to utilize the inline-block style?

Currently, I am delving into the intricacies of the inline-block attribute and have a basic understanding that it allows elements to sit on the same row rather than stack on top of each other as they would in a normal layout. However, my grasp on how exact ...

htmlcss

Implementing a modal component into a React JS page upon loading

I've been working on a webpage using React JS. The site's structure follows MainContent.js --> Main.js --> ReactDOM render. I recently tried to implement a modal popup that worked perfectly in its own project, but ran into issues when imported to ...

cssreactjsmodal-dialogbootstrap-modal

Display the accurate duration based on the dates selected in an HTML form automatically

If someone has office hours on Monday, Wednesday, and Friday from 7:00 am to 7:00 pm, and on Tuesday and Thursday from 10:00 am to 9:00 pm, the dropdown menu should display only the timings of 7:00 AM to 7:00 PM if the selected date is a Monday, Wednesda ...

javascriptjqueryhtml

Clicking within the text activates the dropdown menu, but clicking outside the text does not

My custom drop down menu is not functioning properly. When I click on the text, it successfully links to another place, but when I click beside the text, it does not link. Can you please help me identify what's wrong here? Your assistance would be gre ...

javascriptphpjqueryhtmlcss

Having an issue with displaying the country name and country code in a table using the Angular7 custom pipe

country code: "ab", "aa", "fr", ... I need to create a custom pipe that will convert a countryCode into a countryName, such as: "ab" → "Abkhazian", "ch" → "Chinese", "fr" ...

javascripthtmlangulartypescript

Discrepancy in CSS rendering in Chrome and Firefox

When viewing in Chrome, the stats display properly within the gray box at the bottom left corner. However, when using Firefox, the stats appear positioned much lower below the box, with the bottom half of them hidden from view. Here is my CSS code being ...

cssgoogle-chromefirefox

The wrapAll() method can be used to wrap list items within two columns

I am looking to group multiple li elements within two div containers by using jQuery's wrapAll method. The challenge lies in the fact that these items are rendered within a single <ul> element via a CMS. Here is the current setup: <ul> ...

javascriptjqueryhtmlcss

Encountering a syntax error when attempting to generate a div dynamically with jQuery

I am in the process of creating a view application form using Bootstrap after submitting a form. Initially, I created it utilizing two 'div' elements. Now, I am exploring how to dynamically generate a div upon clicking a button: <i> Sectio ...

javascriptjqueryhtmlcssjson

What is typically regarded as the optimal size for a full-screen background image?

What is the ideal image size for a full-screen background? I currently have an image that is 1920x1080 pixels, but I'm unsure if that's suitable for desktop screens. Can you provide guidance on this? ...

htmlcssbackgroundbackground-image

Modify the background color of one div based on the visibility of another div

My carousel consists of three divs representing a Twitter post, a Facebook post, and a LinkedIn post. These are contained within another div called #social-media-feeds. I am curious if it is feasible to adjust the background color of #social-media-feeds d ...

javascriptjqueryhtmlcss