Tips for Transitioning a Div Smoothly Upwards with CSS!

This is the code that relates to the title:

#main {
    float: left;
    width: 20%;
    height: 10vh;
    margin-top: 10vh;
    margin-left: 40%;
    text-align: center;
}

#k {
    font-family: Questrial;
    font-size: 70px;
    margin-top: -7px;
    margin-left: -2px;
    color: #404040;
    border-bottom: 2px solid #404040;
    line-height: 0.85;
}

#about {
    float: left;
    clear: both;
    width: 38%;
    height: 30vh;
    margin-top: 7vh;
    margin-left: 31%;
    text-align: center;
    background-color: #33CC33;
    border-radius: 100%;
    opacity: 0.6;
    transition: opacity .5s;
    -webkit-transition: opacity .5s;
    transition: margin-top .5s;
    -webkit-transition: margin-top .5s;
    transition: margin-bottom .5s;
    -webkit-transition: margin-bottom .5s;
}

#about:hover {
    opacity: 0.8;
    margin-top: 5vh;
    margin-bottom: 2vh;
}

#work {
    float: left;
    width: 38%;
    height: 30vh;
    margin-top: 0vh;
    margin-left: 10%;
    text-align: center;
    background-color: #323280;
    border-radius: 100%;
    opacity: 0.6;
    transition: opacity .5s;
    -webkit-transition: opacity .5s;
}

#work:hover {
    opacity: 0.8;
}

#contact {
    float: right;
    width: 38%;
    height: 30vh;
    margin-top: 0vh;
    margin-right: 10%;
    text-align: center;
    background-color: #FF6600;
    border-radius: 100%;
    opacity: 0.6;
    transition: opacity .5s;
    -webkit-transition: opacity .5s;
}

#contact:hover {
    opacity: 0.8;
}

.label {
font-family: Questrial;
    color: white;
    font-size: 35px;
    margin-top: 80px;
}
<!DOCTYPE html>
<html>
    <head>
        <title>KURB - Home</title>
        <link rel="stylesheet" type="text/css" href="kurb.css"/>
        <link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div id="main">
            <p id="k">KURB</p>
        </div>
        <div id="about">
            <p class="label">Blah blah blah</p>
        </div>
        <div id="work">
            <p class="label">Blah blah blah blah blah</p>
        </div>
        <div id="contact">
            <p class="label">Blah blah blah blah</p>
        </div>

        <script type="text/javascript">
        </script>
    </body>
</html>

The issue at hand involves animating the top div (#about) to move above the lower two upon mouseover by about 2 vh. The current setup shows an instant rise instead of a smooth animation when hovering. Furthermore, there seems to be a lack of color transition on mouseover for this specific section compared to the others.

An interesting observation is observed when removing the dashes in margin-top and margin-bottom attributes. In this case, instead of a gradual downward movement of the bottom two sections, all elements realign abruptly. This behavior is desired with an animated effect. The cause behind this erratic movement structure remains unclear. Is there a missing element in the configuration leading to this inconsistency?

htmlcsscss-transitions

Answer №1

To implement multiple transitions, it is important to combine them into a single rule rather than separate rules. In CSS, the last rule will take precedence over all previous ones.

Combine them into one rule like this:

transition: opacity .5s, margin-top .5s, margin-bottom .5s;
-webkit-transition: opacity .5s, margin-top .5s, margin-bottom .5s;

For more information on using multiple transitions, check out this MDN article.

Answer №2

Is this what you were thinking of? Check out the Fiddle example: https://jsfiddle.net/99464tyx/2/

If that's correct, simply swap out all transitions with transition: all .5s;

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

Stretch element to reach the edge of the container

I need help with positioning an input and a textarea inside a container that has a height of 52.5vh. I want the textarea to start right below the input and expand all the way to the end of the container. How can I achieve this layout? Both elements should ...

htmlcss

Determining the file extension type of an uploaded file using JavaScript

In my new file upload system, users have the option to upload both images and videos. After uploading a file, I provide a preview of the uploaded content. Desired Outcome: My goal is to display only ONE preview based on the type of file (image or video). ...

javascripthtmlgoogle-chrome-extension

A guide to setting up a Python CGI web server on a Windows operating system

I am looking to set up a basic Python server on a Windows system to test CGI scripts that will ultimately run on a Unix environment. However, when I access the site, it displays a blank page with no source code visible. I am struggling to identify the issu ...

pythonhtmlpython-3.xwebservercgi

Creating an interactive time selection tool with two dropdown lists that are dependent on each other using HTML and JavaScript

Hi everyone, I am new to JavaScript. I am currently working on creating two dropdown lists, one for 'Start Time' and another for 'End Time'. These dropdown lists will display hours in a 24-hour format with intervals of 30 minutes. In t ...

javascriptphphtmlajax

Using the selector gadget to scrape websites with R programming

Attempting to extract information from the site: Encountered a few obstacles: Initially used the selector gadget to identify tables, but it was not effective. Simply typing "table" highlighted 9 tables. Upon running the following code: html <- read_h ...

htmlrweb-scrapingrvest

Issue with the execution of Javascript code. Edit required

After creating a registration form that allows users to input their information for registration, I encountered an issue where if certain fields were left empty or if the user name was unavailable or the email address was already registered, a warning mess ...

javascripthtml

What is the best approach to creating a fully rounded capsule using CSS?

I've been having trouble creating a complete capsule in CSS and I'm not achieving the expected outcome. Can anyone assist me in resolving this issue? I am new to CSS. Below is my code: <style> #myStyle { position: relat ...

htmlcss

Tips for efficiently delivering the create-react-app index file from your server

I have encountered a challenge in my development work with create-react-app. I am looking to serve the index.html file from the backend initially, but I am facing difficulties in achieving this goal. The main reason behind this desire is to customize the ...

javascripthtmlreactjscreate-react-app

Transferring data from ng-init to <script> in AngularJS

Take a look at this code snippet: <div ng-init="companyData"> <script type="text/javascript"> window.timeline = new TL.Timeline('timeline-embed', sampleJson); </script> </div> Is there a method to include company ...

javascripthtmlangularjs

Creating a webpage that dynamically loads both content and video using HTML and Javascript

I designed a loading page for my website, but I could use some assistance. The loading page remains visible until the entire HTML content is loaded and then it fades out. However, I am facing an issue because I have a background video that I want to load ...

javascriptjqueryhtmlcssvideo

Anime.js: Grid layout causing issues with displaying simple text animations

I'm attempting to create a text animation within a grid layout using the anime.js library, but unfortunately, the animation isn't displaying. The project consists of just one HTML file. The JavaScript code: <script> import anime from &ap ...

javascripthtmlcssanime.js

The font styles in IE are failing to render properly following the disabling of caching in Node JS

Why are the CSS fonts not working in Internet Explorer after disabling cache in Node JS? After a user navigates to a page and then clicks the back button to return to the previous page, the font styles are not rendered properly in IE 11. The code 'k ...

cssnode.jsinternet-explorercachingkoa

The `innerHTML` function is responsible for closing HTML

My switch structure is set up as follows: switch (ratio) { case "16:9": imgContainer.innerHTML = '<img src="images/test-rata-de-aspect.jpg">' break case "4:3": imgContainer.innerHTML = '<img src="image ...

javascriptjqueryhtml

Exploring the integration of pre-defined Tailwind classes within Next JS development

As I transition my project from Vite JS to Next JS, I am currently facing an issue with importing Tailwind styles from a file. Even though the file is being read by my project, the styles are not being applied as expected. I'm wondering if there is a ...

cssnext.jstailwind-cssvite

What are the steps for encoding a value using jquery serialize?

I attempted to encode all values using the following code: encodeURIComponent($("#customer_details").serialize()); Unfortunately, it did not produce the desired results. Is there a method to retrieve all elements on a form and individually encode each v ...

javascriptjqueryhtml

leveraging the unique MySQL id displayed within the onclick/checkbox identifier

I am currently working on a website that displays database content and enables users to click on the content to view more information related to that specific id. I also want to include a checkbox next to each piece of content that will allow me to delete ...

phphtmlmysqlcheckboxonclick

Is there a method to incorporate a scroll event into the ng-multi-selectdropdown, a npm package?

Query: I need to incorporate a scroll event in the given html code that triggers when the div is scrolled. However, I am facing issues with implementing a scroll event that works when the elements are being scrolled. <ng-mult ...

javascripthtmlangular

Looking to enhance the accessibility of a dynamically generated file by implementing the ability to expand and collapse sections as parent nodes

Currently working on a webpage where I am showcasing a testsuite file as the parent node and test cases within the testsuite file as child nodes. I have added checkboxes to both the parent and child nodes. Now, my goal is to include an ex ...

javascriptajaxhtml

Struggling to implement the UI router into my Angular Framework

I've been working on a framework that is supposed to be router agnostic. While I've managed to make it work with ngRoute, I just can't seem to get it functioning with UI Router. Here's a snippet of the main app module: (function () { ...

javascriptjqueryhtmlangularjs

Content being pushed upward by Bootstrap modal

I've spent the last few hours working with the bootstrap modal, but I'm encountering some issues. Despite my thorough search, I haven't found anyone facing a similar problem. Here is the structure of my modal: <!-- Modal --> <div ...

htmlcsstwitter-bootstrapbootstrap-modal