Animating the background color of a div vertically from the center using CSS3 or jQuery

Question

Animating the background color of a div vertically from the center using CSS3 or jQuery

I am attempting to achieve a similar effect to the right navigation on the following website:

Using jQuery to create the effect where the color expands from the center is what I am aiming for. However, since that particular site was built using Flash, I am unable to analyze how it was done. I am unsure of what exactly to search for. I was thinking of terms like 'background radial animation jquery' or 'background color animation from center jquery.'

I also considered trying a CSS3 ease-in effect like the one explained here (Expand background from center (CSS / Javascript)). The issue with this solution is that it only demonstrates the CSS3 transition working horizontally, while I require it to work vertically. I have experimented with the JSFiddle provided in the answer (http://jsfiddle.net/SNzgs/), but I can only manage to animate the transition downwards from the top, not expanding from the center. The code snippet they used is:

.redline {background:red;height:10px;width:0;margin:auto;}

.container:hover .redline {
    width:200px;
    -webkit-transition: all 0.3s ease-out;
    transition:all 0.3s ease-out;
}

The code I experimented with is:

.redline {background:red;height:0px;width:10px;margin:auto;}

.container:hover .redline {
    height:200px;
    -webkit-transition: all 0.3s ease-out;
    transition:all 0.3s ease-out;
}

Any assistance you can provide would be greatly appreciated!

javascript jquery html css

Answer 1

Answer №1

My approach shares similarities with matewka's solution, but incorporates both :before and :after pseudo-elements. Here is an example of the HTML markup:

<nav>
    <ul>
        <li><a href="#">Link</a></li>
    </ul>
</nav>

Here is the CSS code:

nav ul {
    list-style: none;
    width: 6em;
}
nav ul li {
    background-color: #eee;
    position: relative;
}
    nav ul li:before,
    nav ul li:after {
        background-color: #333;
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;       /* Positioned vertically in the center */
        bottom: 50%;    /* Positioned vertically in the center */
        transition: all .125s ease-in-out;
        z-index: 50;
    }
nav ul li a {
    color: #333;
    display: block;
    padding: .5em 1em;
    position: relative;
    z-index: 100;
    transition: all .125s ease-in-out;
}
nav ul li a:hover {
    color: #eee;
}
    nav ul li:hover:before {
        top: 0;    /* Expands :before to cover top half */
    }
    nav ul li:hover:after {
        bottom: 0; /* Expands :after to cover bottom half */
    }

http://jsfiddle.net/teddyrised/rRtmB/

Answer 2

My approach shares similarities with matewka's solution, but incorporates both :before and :after pseudo-elements. Here is an example of the HTML markup:

<nav>
    <ul>
        <li><a href="#">Link</a></li>
    </ul>
</nav>

Here is the CSS code:

nav ul {
    list-style: none;
    width: 6em;
}
nav ul li {
    background-color: #eee;
    position: relative;
}
    nav ul li:before,
    nav ul li:after {
        background-color: #333;
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;       /* Positioned vertically in the center */
        bottom: 50%;    /* Positioned vertically in the center */
        transition: all .125s ease-in-out;
        z-index: 50;
    }
nav ul li a {
    color: #333;
    display: block;
    padding: .5em 1em;
    position: relative;
    z-index: 100;
    transition: all .125s ease-in-out;
}
nav ul li a:hover {
    color: #eee;
}
    nav ul li:hover:before {
        top: 0;    /* Expands :before to cover top half */
    }
    nav ul li:hover:after {
        bottom: 0; /* Expands :after to cover bottom half */
    }

http://jsfiddle.net/teddyrised/rRtmB/

Answer 3

Answer №2

You can achieve this effect by utilizing the :after pseudo element along with absolute positioning. By adjusting the height and top properties of the overlay box, you can create the desired shading effect.
I have created a brand new demo: http://jsfiddle.net/abc123/9/ as your existing one was designed for horizontal shading.

.wrapper:after {
    content: "";
    display: block;
    background: #ccc;
    width: 100%;
    height: 0;
    top: 0.5em;
    position: absolute;
    left: 0;

    transition: all 1s ease-out;
}
.wrapper:hover:after {
    top: 0;
    height: 100%;
}

Answer 4

You can achieve this effect by utilizing the :after pseudo element along with absolute positioning. By adjusting the height and top properties of the overlay box, you can create the desired shading effect.
I have created a brand new demo: http://jsfiddle.net/abc123/9/ as your existing one was designed for horizontal shading.

.wrapper:after {
    content: "";
    display: block;
    background: #ccc;
    width: 100%;
    height: 0;
    top: 0.5em;
    position: absolute;
    left: 0;

    transition: all 1s ease-out;
}
.wrapper:hover:after {
    top: 0;
    height: 100%;
}

Answer 5

Answer №3

To add an animated background, you can utilize the :after pseudo element:

CSS

ul {
    margin: 0;
    padding: 0;
}
ul > li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
ul > li > a {
    display: block;
    padding: 10px;
    color: #000000;
    text-decoration: none;
    position: relative;
    z-index: 10;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}
ul > li:hover > a {
    color: #ffffff;
}
ul > li:after {
    content: " ";
    position: absolute;
    top: 50%;
    bottom: 50%;
    left: 0;
    right: 0;
    background: #353535;
    z-index: 0;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}
ul > li:hover:after {
    top: 0;
    bottom: 0;
}

HTML

<ul>
    <li><a href="">Hello</a></li>
    <li><a href="">Hello</a></li>
    <li><a href="">Hello</a></li>
    <li><a href="">Hello</a></li>
</ul>

Check out the demo

Answer 6

To add an animated background, you can utilize the :after pseudo element:

CSS

ul {
    margin: 0;
    padding: 0;
}
ul > li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
ul > li > a {
    display: block;
    padding: 10px;
    color: #000000;
    text-decoration: none;
    position: relative;
    z-index: 10;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}
ul > li:hover > a {
    color: #ffffff;
}
ul > li:after {
    content: " ";
    position: absolute;
    top: 50%;
    bottom: 50%;
    left: 0;
    right: 0;
    background: #353535;
    z-index: 0;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}
ul > li:hover:after {
    top: 0;
    bottom: 0;
}

HTML

<ul>
    <li><a href="">Hello</a></li>
    <li><a href="">Hello</a></li>
    <li><a href="">Hello</a></li>
    <li><a href="">Hello</a></li>
</ul>

Check out the demo

Answer 7

Answer №4

This solution should work for your needs, but keep in mind that it may require some adjustments:

.box {height:120px;width:220px;background:#f2f2f2;position:relative;}
.box p {display:block;}
.horizontal-line {background:#999;height:12px;width:220px;position:absolute;bottom:0;}
.vertical-line {background:blue;height:0;width:220px;margin:auto; top:5px;position:relative;}
.box:hover .vertical-line {
    height:12px;
    top: 0px;
    -webkit-transition: all 0.3s ease-out;
    transition:all 0.3s ease-out;
}

Answer 8

This solution should work for your needs, but keep in mind that it may require some adjustments:

.box {height:120px;width:220px;background:#f2f2f2;position:relative;}
.box p {display:block;}
.horizontal-line {background:#999;height:12px;width:220px;position:absolute;bottom:0;}
.vertical-line {background:blue;height:0;width:220px;margin:auto; top:5px;position:relative;}
.box:hover .vertical-line {
    height:12px;
    top: 0px;
    -webkit-transition: all 0.3s ease-out;
    transition:all 0.3s ease-out;
}

Answer 9

Answer №5

To achieve a similar effect, you can make a few adjustments to your code on the fiddle:

<div class="box">
    <span class="vertical-gray">
        <span class="vertical-red-line"></span>        
    </span>
    <span class="gray-line">
        <span class="red-line"></span>
    </span>
</div>

Here is the updated CSS:

.box {height:100px;width:200px;background:#eee;position:relative;}
.box span {display:block;}
.gray-line {background:#ccc;height:10px;width:200px;position:absolute;bottom:45px;}
.red-line, .vertical-red-line {background:red;height:10px;width:0;margin:auto;}
.vertical-gray {
    background: #CCC;
    height: 100%;
    position: absolute;
    width: 10px;
    left: 90px;
}
.box:hover .red-line {
    width:200px;
    -webkit-transition: all 0.3s ease-out;
    transition:all 0.3s ease-out;
}
.box:hover .vertical-red-line {
    height:100%;
    width: 10px;
    -webkit-transition: all 0.3s ease-out;
    transition:all 0.3s ease-out;
}

You can view the updated fiddle here.

Answer 10

To achieve a similar effect, you can make a few adjustments to your code on the fiddle:

<div class="box">
    <span class="vertical-gray">
        <span class="vertical-red-line"></span>        
    </span>
    <span class="gray-line">
        <span class="red-line"></span>
    </span>
</div>

Here is the updated CSS:

.box {height:100px;width:200px;background:#eee;position:relative;}
.box span {display:block;}
.gray-line {background:#ccc;height:10px;width:200px;position:absolute;bottom:45px;}
.red-line, .vertical-red-line {background:red;height:10px;width:0;margin:auto;}
.vertical-gray {
    background: #CCC;
    height: 100%;
    position: absolute;
    width: 10px;
    left: 90px;
}
.box:hover .red-line {
    width:200px;
    -webkit-transition: all 0.3s ease-out;
    transition:all 0.3s ease-out;
}
.box:hover .vertical-red-line {
    height:100%;
    width: 10px;
    -webkit-transition: all 0.3s ease-out;
    transition:all 0.3s ease-out;
}

You can view the updated fiddle here.

Answer 11

Answer №6

Allow me to offer you a potential solution:

JSFiddle Example: http://jsfiddle.net/username/example/

Here is the CSS code:

.box {height:200px;width:300px;background:#ccc;position:absolute;}
.blackline {display:block;position:relative;background:#000;height:0%;width:100%;}
.redline {display:block;position:relative;background:#f00;height:0%;width:100%;margin-top:80px;}
.box:hover .redline {
    margin-top:0px;
    height:200px;
    -webkit-transition: all 0.5s ease-out;
    transition:all 0.5s ease-out;
}

Here is the HTML code:

<div class="box">
    <div class="blackline">
       <div class="redline"></div>
    </div>
</div>

Answer 12

Allow me to offer you a potential solution:

JSFiddle Example: http://jsfiddle.net/username/example/

Here is the CSS code:

.box {height:200px;width:300px;background:#ccc;position:absolute;}
.blackline {display:block;position:relative;background:#000;height:0%;width:100%;}
.redline {display:block;position:relative;background:#f00;height:0%;width:100%;margin-top:80px;}
.box:hover .redline {
    margin-top:0px;
    height:200px;
    -webkit-transition: all 0.5s ease-out;
    transition:all 0.5s ease-out;
}

Here is the HTML code:

<div class="box">
    <div class="blackline">
       <div class="redline"></div>
    </div>
</div>

Animating the background color of a div vertically from the center using CSS3 or jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Dynamically populate 7 select boxes with options using JQuery

Having trouble grasping the purpose of app.use('/') in the Express framework

Why is it not possible to pass references when utilizing a self-invoking function?

I possess a pair of arrays, and I aim to transfer certain elements from Array1 to Array2 while maintaining their references

Executing a JavaScript function

Converting a base64 string to a PNG format for uploading to an S3 bucket from the frontend

Display the homepage if a user accesses a page intended for an ajax request

Is there a way to preserve text content prior to activating the text-overflow feature with

Console does not display AJAX response

Instructions for including a scroll bar in an HTML side menu

Can a background image be displayed within a DIV using position:absolute?

Nodejs is utilized to alter the data format as it is transferred from the client to the server

Moving from traditional web pages to a mobile application using NextJS has brought about the error "rest.status is

Encountering an issue with setting up Pinia in Vue3, as it is showing an error message stating "

Node-powered Angular

Having trouble with constructing cascading dropdown menus in ASP.NET Core 7 MVC through the use of JQuery and the ajax.googleapis.com platform

Issue with displaying record attribute as a text variable

Updating values using jQuery when tags in a single table row are changed

Installing from a GitHub repository does not always retrieve all of the necessary files

To restore the position of the chosen object in Three.js after clicking reset