Unable to get CSS transition to function properly within Chrome Extension

I am currently attempting to create an effect where the word "credits" expands to reveal the credits when hovered on in a Chrome Extension. However, I am encountering difficulties in getting it to work properly.
Here is the CSS code I have used for handling the credits:

.credits {
float: right;
text-align: right;
cursor: default;
}

.hiddencredits {
display: none;
width: 1px;
height: 1px;
-webkit-transition: width 2s, height 2s;
text-align: center;
cursor: default;
}

.credits:hover .hiddencredits{
display: block;
width: 100px;
height: 100px;
background: black;
color: white;
}

Although hovering over the text does open up the hidden credits section, there seems to be an issue with the transition effect not applying.

Answer №1

Try using the visibility or opacity property instead of the display property.

Check out this example on jsFiddle

.credits {
    float: right;
    text-align: right;
    cursor: default;
}
.hiddencredits {
    visibility: hidden;
    width: 0;
    height: 0;
    -webkit-transition:width 2s, height 2s;
    text-align: center;
    cursor: default;
}
.credits:hover .hiddencredits {
    visibility: visible;
    width: 100px;
    height: 100px;
    background: black;
    color: white;
}

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

Retrieve the value of the option that has been selected and then send it over to the function

Hello, I am currently working on creating a reservation page using Razor Pages in ASP.NET. The page includes two drop down lists - one for selecting the location and the other for choosing a room within that specific location. I want to pass the selected l ...

When a div with a height of 100% exceeds its parent container, it spills over to the flexbox

I have a unique problem with my flexbox layout. Each element within the flexbox contains a card that varies in height. Attempting to make the cards occupy the remaining space of their parent container causes them to overflow into the row below. Even settin ...

Ways to make an area map more transparent

I'm encountering an issue with HTML opacity... Currently, I've implemented opacity using CSS but it's not functioning correctly. Below is my HTML and CSS code: <area shape ="rect" class="transbox" coords ="0,0,30,22" href ="test1.htm" ...

Is the "sticky footer" in CSS causing issues with the percentage height of nested divs?

My "main-section" div is designed to inherit its height from the parent div, known as the "wrapper." The wrapper div, in turn, takes its height from the body of the document. Both the HTML and body tags are set with a height of 100%. To implement the ...

Problem with jQuery's .prepend method being called twice on list items

Looking to enhance the appearance of a list by adding some icons before the anchor links within each list item. <ul class="submenu-children"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> ...

The delete action fails to remove the selected row

Currently, I am working on developing a spring boot web application. I encountered an issue with row deletion in the products list view. Whenever I try to delete a row by clicking "Yes" in the pop-up confirmation window, it always deletes the first row in ...

Change Class Depending on Vertical Scroll Position

Take a look at the Fiddle provided below: https://jsfiddle.net/y0mj6v2d/5/ I'm currently trying to figure out the most effective approach for determining when to apply or remove a class based on the vertical scroll position. My goal is to incorpora ...

Radio button fails to be marked as selected

Currently, I am conducting a test on , and one of the tasks involves styling Radio Buttons using JavaScript (jQuery). Despite my repeated attempts to reconstruct the code, I always encounter the same issue: although JS successfully sets the input radio but ...

What steps should I take to address the issues with my quiz project?

I've been working on a new project that involves creating a quiz game. I came across some code online and decided to customize it for my needs. However, I'm encountering some issues with the functionality of the game. Right now, the questions ar ...

Web scripting using Python

I am new to Python and have been practicing in the IDLE interface. Now, I am interested in configuring Python with MAMP so that I can start building simple web applications - incorporating Python within HTML, or vice versa. (I am assuming HTML is compatibl ...

What is the process for incorporating an external script into a Vue component?

Seeking assistance urgently... I am encountering an issue with a Vue component and an endpoint that provides a script containing a small menu with actions. However, once the script is loaded, the actions do not seem to function on the page and I cannot det ...

How to style a webpage to be printed in CSS with A4 dimensions

Whenever I try to print my webpage, I encounter an issue where everything changes on the printout. I would like to be able to print a webpage that looks exactly like what is displayed on the screen. Here is an example of what I am looking for: enter imag ...

Is it possible to showcase two modals on a single page, positioning one to the left and the other to the right using Bootstrap?

Can someone help me learn how to display two modals on the same screen, one on the left and one on the right? I am new to bootstrap and would appreciate some guidance! ...

Switch up image origin when image reaches screen boundary

I am trying to create a DVD screensaver with changing images each time it hits the edge, but I can't seem to get it to work. I've attempted using the code snippet below: var img = document.getElementById("myImage"); img.src = 'img/new-image. ...

How to Adjust Overlapping Text in CSS?

Currently, I am facing an issue with an element overlapping in my CSS file. On a regular browser, one line of text appears fine but on mobile devices, it overlaps into two lines. This problem is specifically for the mobile version of the website, particula ...

What methods can be used to prevent users from seeing the URL when submitting this form?

My form has numerous fields that I need to submit... When I submit these fields, I use the POST method to conceal the actual variables being passed to the PHP page. Unfortunately, I am unable to eliminate the complete link. Switching from GET to POST su ...

Ways to access the entire parent element, rather than just the individual child element, following the use of e.target

Looking to target the li element itself when clicked, rather than its child elements. The goal is to determine which specific option the user selects from a dropdown menu using event.target in jQuery. If the user chooses an li with a class of 1, set one gl ...

Customize the CSS for the column containers in Material-UI's DataGrid with the

I am facing a challenge in trying to override the CSS property position on the .MuiDataGrid-columnsContainer. Upon reviewing the information available on https://material-ui.com/api/data-grid/#css, it seems that there is a rule defined for root but not spe ...

several tables all set to the identical TD width

Using a css sheet, I have formatted two tables. The first table is used for filter/sort selection, while the second table is a scrollable data table. div#scrollTableContainer { width: auto; margin: 20px; /* just for presentation purposes * ...

Manipulating an SVG file with JavaScript

Within the HTML code, there is a photo already added as an SVG file. I am interested in learning how to enable the user to select between two options - either a cross or a zero. Upon clicking on the designated area, the chosen figure should appear (resembl ...