CSS unexpectedly transitions away

Check out this link for additional details

As the cursor moves away from the element, it swiftly reverts back to its original form

(I've demonstrated this in the video)

.productinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 1%;
    margin-top: 3%;
    color: #ff0062;
    flex: 0 0 25%;
    border: 3px solid #FF00FF;
    transition: 1ms;
}

.productinfo:nth-child(-n+3) {
    margin-top: 1%;
}

.productinfo:hover {
    animation: changeColor 3s, changefontsize 5s forwards;
}

@keyframes changeColor{
    33%{border-top: 3px solid #4281A4;}
    66%{border-right: 3px solid #4281A4;}
    66%{border-left: 3px solid #4281A4;}    
    100%{border-bottom: 3px solid #4281A4;}
}


@keyframes changefontsize{
    0%{font-size: 5;}
    25%{font-size: 10;}
    50%{font-size: 15;}    
    100%{font-size: 25px;}
}

This represents my current code structure

htmlcsstransition

Answer №1

Is this method utilizing CSS transitions achieving the desired outcome (displaying only the modified code)?

.productinfo {
    transition: border 3s linear, font-size 5s linear;
}

.productinfo:hover {
    border: 3px solid #4281A4;
    font-size: 25px;

}

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

Access the designated hyperlink within the table row

Currently experimenting with Selenium Webdriver in Firefox and also looking to test in IE8. Below is the structure of my HTML: <table id="table"> <tbody> <tr> <td>Text1</td> <td><a id="assign" hr ...

cssseleniumxpathselector

EJS file not displaying stylesheets and images correctly during rendering

I'm currently in the process of building a website, but when I try to render an ejs file (index.ejs), only the HTML portion is displayed without showing any stylesheets, fonts, or images. Here is the code snippet for linking the stylesheets: <!D ...

htmlnode.jsexpressdirectoryejs

Sibling proximity: an excess of elements separating the regulations

Is there a way to make a hidden p element appear when hovering over the first visible element in a tree structure? I found some help on Stack Overflow suggesting the use of adjacent sibling selectors, and while it works well with a simple example, it fails ...

htmlcsshoverhidesiblings

The PHP script is not redirecting properly following the submission of the

My challenge is to have my webpage redirect after deleting a record from the database. Despite echoing out text and successfully deleting the record, it simply reloads me on the same page with an empty form. This is the button I am using echo '<f ...

phphtmlformshttp-redirectsubmit

Place a circular grid at the center of a webpage

Is there a way to align this grid in the center of a webpage? It appears skewed on mobile view but not on larger screens. The issue seems to be primarily with mobile devices. For instance, when viewed on a mobile device, the circles are positioned to the r ...

htmlcss

Build a dynamic checkbox list using DOM manipulation in JavaScript, populating it with values from an array

I am looking to create a checkbox list in JavaScript populated with names of animals from an array, and then display them in HTML. Here is my attempt at the code: var animalArrayLength = animals.length; for (var i= 0; pos < tamanhoArrayDiagnosticos; ...

javascripthtmlarrays

SVG Sprite remains functional even after deleting the element

Within my index.shtml, I include the following code: <object data="icons/svg-sprite.svg" type="image/svg+xml" width="0" height="0" style="display: none;"></object> Inside my svg-sprite.svg file ...

htmlcsssvgsprite

jQuery function to automatically close any other opened divs when a new div is opened

I have multiple elements that reveal a div when clicked. The issue is that if all elements are clicked, all divs open instead of just the one that was clicked. This is my jQuery code: <script> $(document).ready(function() { $('.servicemark ...

javascriptjqueryhtmlcss

External JavaScript is not functioning

I am encountering an issue with an external JavaScript file not working in my HTML document. Strangely, Firebug is not reporting any failures. However, when I directly run the JS code in my HTML file, it works perfectly. Here is the content of action.js: ...

javascriptjqueryhtmlwebexternal

Is it possible to style the parent CSS file using a query?

Is it feasible to achieve this, or are there alternative methods to accomplish something similar? In a CSS file, we have the ability to set queries for various screen resolutions, allowing CSS rules to apply only to specific screens. @media (max-width: 76 ...

htmlcsscss-selectors

The Bootstrap 4 modal is failing to appear on the screen

My design features an image within a centered div, overlaid with a semi-opaque textbox containing an h1 element. I'm trying to implement a Bootstrap 4 modal component that pops up when the h1 is clicked. Despite following various tutorials for creatin ...

csstwitter-bootstrapresponsive-designbootstrap-4

What is the correct way to accurately determine the width of a block being displayed with the flex-direction:column property?

For instance: HTML console.log($('.container').width()); // 600px as we defined in css. console.log($('.list').width()); // 600px console.log($('.box').eq('-1').position().left + $('.box').outerWidth( ...

javascriptcssflexbox

Save the selected value from the dropdown menu and automatically check the corresponding checkbox when it

I'm attempting to update the 'value' of a checkbox once an item is chosen from a dropdown list and then the checkbox itself is clicked. I have created a jQuery function that captures the value from the dropdown list (I omitted the code for t ...

javascriptjqueryhtmlcheckbox

What happens when browsers encounter unfamiliar at-rules?

CSS at-rules have been part of CSS since the days of CSS2. As CSS evolves with new specifications like @supports, it's interesting to see how different browsers handle unsupported rules. Do major browsers simply ignore unrecognized rules, or do they f ...

csscross-browser

When using the keyboard to navigate, the aria-label attribute is not being properly recognized

<span class="phone" aria-label="phone number 9 4 9 . 5 5 5 . 1 2 3 4">949.555.1234</span> This code snippet displays a phone number on the webpage. When clicking on the phone number, it reads the aria-label as intended. However, if you navigat ...

javascripthtmlaccessibilitywai-aria

keeping the size consistent when submitting

I am currently developing a website that features several links on the side. When I click on one of these links, it redirects me to a specific .php file. Each PHP file contains the same header and footer. However, I have encountered an issue where every ti ...

javascriptphphtmlsize

Missing ghost image appears when you drag and drop the file

New to JavaScript... As a rookie in coding, I often get interesting requests from my partner who is a kindergarten teacher. Recently, she asked me to create a "Function Machine" for her classroom activities. With some trial and error, I managed to put tog ...

javascriptcss

How can I target the first checkbox within a table row using jQuery?

I am seeking a way to determine if the first checkbox in a table row is selected, rather than checking all checkboxes within that particular row. Currently, I am using this code: var b = false; $j('#tb1 td input:checkbox').each(function(){ ...

javascriptjqueryhtmlcheckbox

Animate the menu as you scroll

I am attempting to create a jQuery top menu that adjusts its height based on the window scroll position. Using $(selector).css("height", "value") works fine, but when I try to animate it, it doesn't behave correctly. Here is my code. Thank you for you ...

jqueryhtmlcsstwitter-bootstrap

Issues with modals appearing improperly after transitioning to NG-Bootstrap 15 and Bootstrap 5 upgrade

UPDATED following a thorough examination: In the process of upgrading our application from NG-Boostrap v11 with bootstrap 4 to NG-Boostrap v15 with Bootstrap 5 and Popper, we also made the switch from Angular 15 to Angular 16. Despite successfully resolvi ...

cssangularbootstrap-5ng-bootstrap