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

Adjust the color of text as you scroll

Could you provide guidance on changing the color of fixed texts in specific sections of my portfolio website? Unfortunately, I can't share my lengthy code here, but would greatly appreciate it if you could illustrate with examples. Here's a refer ...

javascripthtmlcss

How can I showcase the index of `<tr>` and `<td>` elements in a dynamically generated table

How can I print the index of table rows and data on click in javascript? <html> <head> <title>Table Creation</title> <script language="javascript" type="text/javascript"> function createTable() { ...

javascripthtmlcss

Sending data to a React component from regular HTML

I have a question about implementing a method to pass custom attributes from HTML elements as props to React components. Here's an example: function someFunction(props) { return <h1>props.something</h1> } HTML: <div id="someEl ...

javascripthtmlreactjstypescriptfrontend

Clickable Slider Picture

I'm having a minor issue with a jQuery script that slides images on my website. The script itself is functioning properly, but I am trying to add links to each image. I've attempted placing <a href> and </a> tags around the <img> ...

javascriptjqueryhtml

What steps do I need to take to make this JavaScript code function properly? How can I create a carbon copy email setup in

Recently, I've been struggling to implement this particular code on my website as I am not very proficient in JavaScript. Despite searching for various online resources, none of them seem to address my issue. This code is meant to be a part of a form ...

javascripthtml

PHP: Using conditional statements to adjust datetime formatting for CSS styling

My title may not make sense, as I am new to PHP. I'm trying to create a custom member tag for my forum that shows "X Years of Experience" with different colors based on the number of years. For example, red for under 6 months, blue for year one, yell ...

phphtmlcssdatetime

Android Gmail Application: Implementing 1px horizontal spacing between inline images placed within <td> tags

Have you ever noticed that in the Android Gmail app, there can be a mysterious 1px gap between inline images? This little pixel problem can sometimes push the rightmost image outside the comfy frame of your email. It seems this glitch prefers images of cer ...

androidhtmlemailgmail

Dynamic and static webpage

Is it possible to design a webpage using purely valid HTML and CSS that can dynamically adjust its size based on the browser window, while ensuring none of the content is lost or cut off? Please refer to the linked image for a visual representation of what ...

htmlcssfixedfluid

Customizing Text Placement in HTML Lists with CSS List-Style-Image

Is there a way to adjust the vertical positioning of the "Blahs" in the list so that they appear closer to the center of each list bullet in the image displayed on my HTML code below? Here is the snippet of code: <html> <style> li { margin-to ...

htmlcssimagelistposition

PHP Table Sorting Functionality

After inputting the correct code, I am still facing an issue with the table sorting not showing up. Can someone assist me with this problem? I have included both my CSS styles and PHP coding. Thank you for your help! Here is a visual representation of the ...

phphtmlsortinghtml-table

Is it possible to extract tooltip text from a website using Python and Selenium, specifically when the text is generated by JavaScript?

Can anyone help me retrieve the tooltip text that appears when I hover over the time indicating how long ago a game was played? You can find my summoner profile here. I have noticed that the tooltip text is not visible in the HTML code and suspect it may ...

javascriptpythonhtmlselenium

Tips for showing a value in a disabled text input box

When users access the page, the table should appear as follows: Marks Per Answer Total Marks Marks Remaining (blank text input) 4 4 (blank text inp ...

phpjqueryhtml

Creating an interactive map on an image using HTML and drawing circles

I've been experimenting with drawing circles on images using the map property in HTML. I have an image set up, and when clicking on the image in JavaScript, I'm adding the area coordinates for the map property. However, I keep encountering a null ...

javascripthtmlimagedictionary

Interact with one div to trigger changes in another (CSS)

I successfully influenced the style of one div when hovering over another div using the "+" selector, but I would prefer to find a different solution. My goal is for this interaction to work even if the .h div and the .t div are located in separate parent ...

htmlcsshoverselector

What is the best way to make an element disappear 5 seconds after the mouse has stopped hovering

#section1 { display: block; } #section2 { display: none; } #container:hover > #section2 { display: block; } <div id="container"> <div id="section1">Section1</div> <div id="section2">Section2</div> </div> ...

javascriptjqueryhtmlcssmousehover

Transforming JQuery code into pure Javascript: Attaching an event listener to dynamically generated elements

After exhausting all available resources on stack overflow, I am still unable to find a solution to my problem. I am currently trying to convert the JQuery function below into Vanilla JavaScript as part of my mission to make web pages free of JQuery. How ...

javascriptjqueryhtml

Positioning CSS for a Responsive Button

Currently, I am working on making my modal responsive. However, I am encountering an issue with the positioning of the "SAVE" button. The button is not staying in the desired position but instead disappears. Below is the snippet of my HTML and CSS: .dele ...

javascripthtmlcssangular

The color of the Bootstrap font remains unchanged and the responsiveness of the navbar button is not functioning correctly

Just starting out with frontend development and my professor recommended trying Bootstrap for practice. I attempted to code a simple webpage, but ran into some issues. Here is the code I used: https://github.com/nguyencuc2586/project1 I encountered a pro ...

htmlcssbootstrap-4bootstrap-5

Omit the element from the event listener

Is there a way to prevent the image from triggering a click event in this code snippet? $('#templtable .trhover *:not(#infoimg)').live('click', function(event) { event.stopPropagation(); $(this).toggleClass('selected&a ...

jquerycss

Problem with animated scrolling in Jquery

Currently, I am working on a function that aims to smoothly scroll the web to a specific div each time a user scrolls "into" a container div. You can get a better idea of what I mean by looking at my JSFiddle. Everything works perfectly when the user scro ...

javascriptjqueryhtmlcss