Is it feasible to determine the starting direction of a CSS transition?
I've designed a div that enlarges in height when hovered over; however, it's situated at the bottom of the page, causing the scrollbar to extend downward.
Ideally, I would prefer the div to expand upwards, instead of having an anchor point at the top which leads to a downward expansion. I hope this explanation is clear.
Your assistance in resolving this matter would be greatly appreciated.
Thank you!
Enclose your element within a relatively positioned container.
Next, apply position: absolute; bottom: 0 to your element :
.relative {
position: relative;
}
.back-to-top {
position: absolute;
bottom: 0;
height: 20px;
transition: height .5s;
}
.back-to-top:hover {
height: 50px;
}
/* Style only */
.back-to-top {
display: inline-block;
background: #e74c3c;
border-radius: 5px;
color: white;
text-decoration: none;
padding: 0 5px;
}<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus...
</p>
<br>
<div class="relative">
<a href="#" class="back-to-top">Back to the top</a>
</div>Using material-ui popper to display a list of avatars. Trying to arrange the avatars horizontally within the popper. <Popper style={{ display: 'flex', maxWidth: '200px', }}> <div style={{ marginRight: '20px' }}&g ...
My table includes cells with colspan and rowspan attributes. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <table border=1 id="mytable" > <tr><td>A1</td> <td> A2 < ...
I'm facing an issue where I want to run a specific block of code when a div is clicked for the first time, and then another block when it's clicked for the second time. The problem is that even though my alert shows the variable being updated wit ...
In my NetBeans project, I currently have a large web project with CSS files included in the header. Some CSS codes are needed on all pages, while others are only necessary for specific pages. I am looking to optimize high-traffic pages by removing any ...
I am currently utilizing the jQuery function $.getJson. It is successfully sending the desired data, and the PHP script generating the JSON is functioning properly. However, I am encountering an issue at this stage. Within my $.getJSON code, my intention ...
Is there a way to dynamically add a CSS stylesheet based on the presence of a specific class on a page? For example, instead of checking the time and loading different stylesheets, I want to load different stylesheets depending on the class present in the ...
I am currently utilizing the jquery CircularSlider Plugin to implement 4 sliders on a single page. I have customized values for each slider and now I am looking to retrieve the value of each slider using an angularjs Directive. var intensity = $('#i ...
With my Node.js app using Express, I've set up a route for handling POST requests to create database objects. app.post('/', function(req, res) { // Create object in DB res.send(''); res.status(201).end(); }); I know t ...
I am having an issue with submitting a form using AJAX to a servlet. The form is being submitted successfully, the database entries are changing, but for some reason the callback function is not executing. Any help would be greatly appreciated. Here is the ...
Dealing with a large file structured in the same way, I am looking for a method to isolate a specific div, determine the number of ul's within it, and then iterate through each one to extract the value of every li element. <div class="experiment ...
To dynamically apply darker shades of background using JavaScript, I have devised the following code. .event-list .bg{ background:#eee; padding:5px; } .grid .event-list:first-child .bg{ background: #2aac97 } .grid .event-list:nth-child(2) .bg{ backgrou ...
Currently on our website, we fetch description text from the cloud provider to display in tables. Sometimes, the description is too long and gets cut off with an ellipsis due to CSS overflow settings. I'm hoping to implement some jQuery code that will ...
How can I center the content in each section of my webpage? Here is an image for reference: https://i.stack.imgur.com/PHEXb.png I want Section 1 and Section 2 to be 100vh with the content centered on the page. .content { height: 100vh; } <!do ...
I have a simple question. I would like to utilize the Bootstrap 3 collapse function to display some content, but without the ability to hide it when clicking on the link or button. Basically, I want the content to appear when clicking on the link or butto ...
I attempted to validate my form using jQuery validation, and now I am looking for a way to display errors using the jQuery notify plugin. After searching online, I couldn't find a solution. Can anyone assist me with this? This is what I have tried: ...
I am working on achieving the following goal: Elements containing values should have a gray 'ribbon'. Elements with values are given a class selected, while elements without any value do not have this class. This is how my HTML code appears: & ...
I have a loop that creates multiple divs with the class panel. @for(comment <- event.getCommentsSorted()) { However, when I try to manipulate each of these divs using jQuery's .each, only the first two divs are selected. $(window).on('load& ...
For my form submission, I am utilizing ajaxForm(options) to run some functions before submitting the form. Here is an example of the options that I have configured: var options = { target : '#output1', success : ...
I've been attempting to add a border using ng-style, but I'm struggling to figure out how to concatenate the value from the scope variable. None of the methods below seem to be working for me: <div ng-style="{'border-top' :'1p ...
Hello there! I need some help with Safari. Can you please guide me on how to disable the arrows? https://i.stack.imgur.com/1gzat.png ...