Tips for creating a CSS transition that reverses direction

Is there a way to create a hover effect where a border appears at the bottom of an element when it is being hovered over, and then retracts back when the mouse leaves the element? I've managed to get the border to appear on hover using CSS, but I'm struggling with making it retract smoothly. Here's a link to my Codepen for reference.

Here's the HTML:

<div class="object">

<p>Object</p>

</div>

And here's the CSS:

* {
background-color: #222;
color: white;
font-family: sans-serif;
font-size: 30pt;
}

p {
 width: 200px;
height: 100%;
margin-top: 70px;
text-align: center;
transition: 0.2s border-bottom;
-webkit-transition: 0.2s border-bottom;
margin: auto;
margin-top: 50px;
}

p:hover {
  border-bottom: 5px solid white;
}

If anyone could provide a simple solution to achieve the desired effect, that would be much appreciated! Thank you :)

htmlcsscss-transitions

Answer №1

Transitions occur seamlessly in both directions without manual adjustments.

The issue you're encountering is due to the fact that the border-style property cannot be animated, resulting in an immediate change.

When hovering over it, the border instantly changes to solid before transitioning to 5px.

Upon unhovering, the border reverts to 

none</code immediately, making it difficult to observe the width animation.</p>

<p>To resolve this, make sure the default non-hovered state explicitly defines that only the <code>border-width
changes upon hover.

Include the following line:

border-bottom: 0px solid white;

in the rules for p.

Answer №2

For those seeking a solution, I found that the following method worked well for me:

On hover:

.<nameOfClass>:hover{
 transition: width 0.4s ease-in-out;
}

Without hover:

.<nameOfClass>:not(:hover){
 transition: width 0.4s ease-in-out;
}

Answer №3

Include border-bottom: 0px solid white in the styling for p. This helps CSS determine where to revert back to during transitions!

Answer №4

To create a smooth transition effect, simply apply the animate class to the desired element.

.animate 
 { 
  transition: all .5s;
  -moz-transition: all .5s;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  -ms-transition: all .5s;
 }

Once you assign this class to your element, it will smoothly transition upon hover and when hovered out.

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

Is it permissible for H2 heading to resemble H1 visually, and vice versa, in compliance with WCAG guidelines?

My expertise lies in Accessibility testing. Currently, we are dealing with Two headings <h1 class="CssPropertywithSmallFontSize">Heading One</h1> <h2 class="CssPropertywithBiggerFontSize">Heading Two</h2> From a visual standpoint, ...

htmlcsswcag2.0

Using JavaScript to browse and filter by category

After spending some time working on a search function, I received some assistance from Tim Down who provided me with a simple code to search for specific text within a page. Now, my goal is to modify the code to enable searching by category. I have struct ...

javascripthtmldom

What steps should I take to have a specific input prompt a certain action?

I am currently working on creating a function that checks when a user inputs a number between 0 and 8, triggering an action corresponding to that specific number. For example, if the user enters 5, a picture and text should appear; whereas if they input 3, ...

javascripthtmlcss

Resolving Div Alignment Issues in Internet Explorer with jQuery CSS AddClass and RemoveClass

I've set up an HTML table with a hover highlight feature using jQuery and CSS. Here's how my hover event is structured: $('#' + element.id + ' tr:not(:first,[class="summary_row"])').die('mouseover mouseout').live(&a ...

jqueryhtmlcssinternet-explorer-9

How to Retrieve Checkbox Values from Multiple Rows Using JavaScript

I have a variety of module rows that allow users to manage access rights by selecting specific options. My goal now is to extract the checked boxes from these checkboxes with the name "config{{$field->id}}". Below is the current functioning code. HTM ...

javascripthtml

Reset input fields upon jQuery removal

Currently, I am working on a form that includes a remove function. The function is functioning correctly, but I am facing an issue where I want the field values to be cleared when the remove function is triggered. This is necessary as I am sending input va ...

javascriptjqueryhtml

Hide the div element once the timer runs out

Struggling to make a timer disappear when it reaches 00:00, every attempt results in the div being hidden immediately. Check out the code snippet I've been working with: $(document).ready(function(e) { var $worked = $("#worked"); function upd ...

javascriptjqueryhtmlcountdown

Prevent using href for opening the browser when clicked

In the control, there is an href link that triggers a javascript function and passes a variable to it: <a href="<%#XPath("link").ToString()%>" onclick="return getLink(this)">Link</a> I'm looking for a way to prevent the browser fro ...

javascripthtmlhref

How come when I applied height:100% and position: absolute to .test2, it ended up being 200px instead of the expected 204px

Upon setting the height of a container element to 200px, I encountered an issue when trying to set the height of another element within it to 100%. The height didn't render as expected, as height:100% takes the height of the parent element, which was ...

htmlcss

Retrieve main page elements from an additional page called PageSlide

I have implemented the jquery PageSlide plugin as a menu feature on my website. The plugin opens a separate page on the side of the main page to function as a menu. However, I am facing a challenge in accessing the main page's elements from this side ...

javascriptjqueryhtmlcss

Choose a particular element within an element class using a variable as the selector in jQuery

Is there a way to dynamically add a class to a specific element in an array based on a variable in a for loop, rather than random selection? I need to target elements with the variable provided and possibly apply the class to more than one element if neces ...

javascriptjquerynode.jshtmlfor-loop

Varying spacing among elements with identical classes

I'm facing some styling issues. My goal is to ensure that each h3 tag has the same distance between the bottom border of its container (marked with a pink border) and the bottom border of its parent (indicated in the image below): Both elements have ...

htmlcsssass

What is preventing me from setting the height of a span to 0 pixels?

It seems that when the height is set to 0px, the element doesn't visually shrink... <div id="bg"> <div id="animate"><span>WINNER ALERT! Click here to get a million dollars!!!</span></div> </div> #bg { back ...

css

How can I achieve a transparent background for a text field in CSS instead of white?

I've come across several solutions, but none have been able to solve my issue so far. The text fields in question look like this: .form-wrapper .field-list .field .field-element{ background-color: rgba(0,0,0,0.5); color: rgba(255,255 ...

css

Using Express.js to serve simple SVG files (Technique involving Cheerio.js)

My goal is to manipulate SVGs before sending them through Express.js. The code snippet I am using is as follows: app.get("/iconic/styles/:style/:base/:icon", function (req, res) { var style = req.params.style; var base = req.params.base; var i ...

htmlcssnode.jsexpresssvg

Having trouble displaying dynamically added images in my jsx-react component. The images are not showing up as expected

import React from "react"; import ReactDOM from "react-dom"; var bImg = prompt("Enter the URL of the image you want to set as the background:"); const bStyle = { backgroundImage: "url(bImg)"; // The link is stored ...

javascriptcssreactjsjsx

Utilizing the powerful combination of TailwindCSS and Next.js Image to achieve a full height display with

Trying to utilize the Next.js' <Image> component with the layout=fill setting, I created a relative div housing the Image tag. However, I am looking for a way to set the height based on the Image's height. Came across this example, but the ...

cssnext.jstailwind-cssnextjs-image

jQuery puzzle: a form within a form within a form

I am facing a bit of a dilemma with a partially working solution. The scenario is this - I am using a basic .load() function attached to a <select> element to fetch another form populated through PHP/MySQL. What I intend to achieve is for this newly ...

phpjavascriptjqueryhtmlajax

Does the language setting on a browser always stay consistent?

Using javascript, I am able to identify the language of my browser function detectLanguage(){ return navigator.language || navigator.userLanguage; } This code snippet returns 'en-EN' as the language. I'm curious if this i ...

javascripthtmlmultilinguallang

HTML Buttons Remain Selected After Being Clicked

Currently working on a calculator app for a class project but I've hit a roadblock while setting up keyboard listeners. The keyboard functionality is fine, however, when it comes to clicking on buttons, specifically the non-keyboard functions, they re ...

javascripthtmlcsstwitter-bootstrap-3