How can I achieve a transition effect to move the border-bottom up on hover? Currently, my attempts are not working as expected. Any advice on how to make it work smoothly?
.nav h1 {
display: inline-block;
border-bottom: 2px solid #fff;
padding-bottom: 8px;
margin: 20px;
}
.nav h1 a:hover::after {
padding-bottom: -8px;
transition: 0.5s ease-in;
}
To accomplish this, one approach is to adjust the value of bottom: value.
/*DEMO*/*,*::before,*::after{box-sizing:border-box}div{margin-top:3rem}
h1,
span {
position: relative
}
h1:after,
span:after {
content: '';
position: absolute;
left: 0;
bottom: -20px;
right: 0;
border-bottom: 2px red solid;
transition: .5s
}
h1:hover:after,
span:hover:after {
bottom: 0;
transition: .5s
}<h1>Example block element</h1>
<div>
<span>Inline element</span>
<div>Another technique that could be effective is adjusting the height of the :after element and modifying it on hover.
Here is a basic example of transitioning the border-bottom up 8px on hover, as requested:
body {background-color: #eee;}
.nav {
width: 100px;
height: 100px;
display: inline-block;
border-bottom: 2px solid #fff;
margin: 20px;
background: #ddd;
transition-duration: 0.5s;
}
.nav:hover {
width: 100px;
height: 92px;
}<h1 class="nav"></h1>Hey there! Check out this code snippet:
h1.nav {
border-bottom: 2px solid red;
display: inline-block;
line-height: 40px;
padding: 5px;
margin: 5px;
}
h1.nav:hover {
line-height: 20px;
transition: all 1s ease-in;
}<h1 class="nav">Hey</h1>
<h1 class="nav>hello</h1>
<h1 class="nav">Hey</h1>If this is what you were looking for, great! Feel free to provide more details if needed.
To achieve a border effect, you can opt for a simple background and easily adjust its position using the background-position property.
.box {
font-size:30px;
padding:8px 0;
display:inline-block;
background:linear-gradient(red,red) no-repeat;
background-size:100% 1px;
background-position:bottom 2px left 0;
transition:0.5s;
}
.box:hover {
background-position:bottom 20px left 0;
}<div class="box"> some text </div>You can also animate the transition from bottom to top.
.box {
font-size:30px;
padding:8px 0;
display:inline-block;
background:linear-gradient(red,red) no-repeat;
background-size:100% 1px;
background-position:bottom;
transition:0.5s;
}
.box:hover {
background-position:top;
}<div class="box"> some text </div>Check out this simple demonstration on how to elevate the border-bottom effect on hover
li {
margin-bottom: 10px;
}
.cool-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #000;
transition: width .3s;
}
.cool-link:hover::after {
width: 100%;
}<ul>
<li><a class="cool-link" href="#">A cool link</a></li>
<li><a class="cool-link" href="#">A cool link</a></li>
<li><a class="cool-link" href="#">A cool link</a></li>
</ul>To adjust the border position higher, use height instead of line height
h1.nav:hover {
height: 0px;
transition: all 1s ease-in;
}
h1.nav {
border-bottom: 2px solid red;
display: inline-block;
height: 40px;
padding: 5px;
margin: 5px;
}<h1 class="nav">Hey</h1>
<h1 class="nav">hello</h1>
<h1 class="nav">Hey</h1>Below is the HTML code where the div is being cut by the table border when the page is in standards mode. Interestingly, if I remove the <!DOCTYPE html>, then it works fine as expected. The issue of the outside div not behaving properly on the table ...
Can anyone offer assistance with this section of code? HTML: <div id="holder"> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> </div> ...
Need help checking if a specific id has a particular class. Unsure of the process? Here's the code snippet where the attempt at checking the id for a specific class is visible within the homeTransition function. function homeTransition() { ...
I have a simple structure that looks like this: <div class="inline"> <div class="photo-group thumb_wrapper"> <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQYZ35nsT0CRTlGBtNmPHikH74wXBldsPe8LQYfhXnzADYo-xSU" ...
I am having an issue with my SVG element (shown below) where it stops animating after a certain period of time. I want the animation to continue indefinitely like in this jsfiddle. .path { stroke-dasharray: 20; animation: dash 10s linear; } @ ...
I'm facing a challenge in executing a function twice, and I'm having trouble identifying the issue. Check out my JSFiddle at the following link: http://jsfiddle.net/g6PLu/3/ Javascript function truncate() { $(this).addClass('closed&apo ...
After spending an hour trying to troubleshoot and searching for solutions, I am turning here for help. I am attempting to insert a Bootstrap Nav-Bar into a Div. I successfully centered the Nav-Bar, but now my Div is taller than the content inside it. This ...
Experiencing Zoom Issue on Flutter Web Project: While working on my Flutter web project, I have encountered an issue where the page loads with a zoomed-in view on certain devices. Despite setting the viewport meta tag correctly, the zoom problem persists. ...
I'm currently working on a project where I need to implement horizontal movement for a DOM element. The movement should start on mousedown, continue on mousemove, and end on mouseup. This task is especially challenging due to the site's numerous ...
I'm currently working on a frontend application and I've decided to utilize the Easyui library to help with managing the page layout. One particular section of code is causing me some trouble: <div id="stgis-app" class="stgis stgis-content e ...
Is there a way to prevent the content from zooming when printing while the browser is zoomed in? The goal is for the printing (using iframe) to remain unchanged even if the browser is zoomed. I attempted: document.body.style.transformOrigin = 'top le ...
<script> $(function() { $('.slideshow').each(function(index, element) { $(element).crossSlide({ sleep: 2, fade: 1 }, [ { src: 'picture' + (index + 1) + '.jpg' } ]); }); ...
Creating a blog site example and trying to lock the position of a div once it reaches the top of the page. Utilizing materialize.css for this task. <div class="row"> <div class="col m8 s12"> <!-- content goes here --> < ...
Is there a way to ensure that the div (home) remains centered on the page while keeping the footer at the bottom, even as I resize the browser window? Currently, the issue is that the div moves to the top when I shrink the window. Just to note, I am using ...
I am working on designing a layout that looks like this: https://i.sstatic.net/jAaXL.jpg I have set the wrapper as a class and aim to center everything on the screen. Aside from the wrapper, I also want to make the text and form equal sizes. Here is th ...
I've been experimenting with the word-break css property, but I just can't seem to get it to work even when using a simple example. Here's my code: React: render() { return ( <h5 className="word-break">A very very long line.... ...
Can you help me figure out how to achieve this effect using CSS? It seems like a simple task: border-top: 1px solid #E2E2E2; border-left: 1px solid #E2E2E2; border-bottom: 1px solid #848484; border-right: 1px solid #848484; Just add: box-shadow: 0.7px ...
I am trying to position a 'div' under a 'textarea' within an 'svg' and 'g' element. This works fine in Firefox, but not in Chrome. When I apply a transform on the 'g' element, it moves correctly to the des ...
I would like my modal to contain three elements: On the left: a button In the center: a title On the right: a close button At first glance, it may appear that I have achieved this layout, but in reality, my title is not properly centered. Here's the ...
After scouring numerous sources on the web, I have found various tips for centering a div. However, no matter what I try, there seems to be a persistent white space to the left of my div that I just can't seem to resolve. If you're curious, her ...