Is it possible to gradually open or close a div element?

Looking for a way to add an effect to the code below that opens/closes a div on mouseover above an image. Any examples or suggestions? I'm not exactly a javascript expert.

HTML:

<div>
<div class="under"><img src="http://oi60.tinypic.com/244xp91.jpg" alt="test"></div>
<div class="top">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. aurabitur ullamcorper ultricies nisi. Nam eget dui.
</div>
</div>

CSS:

div {
    height: 400px;
    width: 600px;
}

div > div {
    height: 70px;
    position: absolute;
}

.under {
    background: yellow;
    top: 0px;
}

.top {
    background: #008285;
    bottom: -50px;
    top: 330px;
}

.top:hover {
    background: #008285;
    bottom: 100px;
    height: 300px;
    top: 100px;
}

JSFiddle: http://jsfiddle.net/2obp1hgL/

Answer №1

One option is to utilize the following CSS code:

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

For a demonstration, check out this link.

Answer №2

To apply a transition effect in CSS, you can use the following code snippet (replace 3s with your desired duration):

-webkit-transition: all 3s;
-moz-transition: all 3s;
-ms-transition: all 3s;
-o-transition: all 3s;
transition: all 3s;

Check out the updated example on JSFiddle: Transition

If you only want certain properties to have the transition effect, replace "all" with the property names like this:

all 3s ---> width 1s, bottom 2s, height 0.2s

Answer №3

If you want to add smooth transitions to your CSS, you can utilize the transition property. Check out this example on jsfiddle for reference.

.top {
    background: #008285;
    bottom: -50px;
    top: 330px;
    -webkit-transition: top .5s, bottom .5s, background .5s; 
    transition: top .5s, bottom .5s, background .5s;
}

Answer №4

Revamp your CSS for the .top class with these changes

Check out your modified JSFiddle

To delve deeper into transitions, refer to this resource here

.top {
        background: #008285;
        bottom: -50px;
        top: 330px;
            /* For Safari 3.1 to 6.0 */
        -webkit-transition-property: all;
        -webkit-transition-duration: 1s;
        /* Standard syntax */
        transition-property: all;
        transition-duration: 1s;
    }

It would be advantageous to implement this using JavaScript due to transition support

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

Can we ensure there is consistently an even number of columns when using auto-fill?

Hello, I am just starting to explore CSS grid. Take a look at the example below: .platform { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-gap: 20px; } .item { width:100%; background-color:#aaa; padding:10 ...

Ways to make an image wander aimlessly across a webpage while also spinning as it moves (with the help of jQuery or CSS)

I am working on making a div randomly move around a page. This is a related question Now, I have replaced the div with a picture like an "arrow" and I want it to randomly move while also pointing in the right direction by changing its rotation angle as i ...

Two identical Vue component instances

Is there a way to duplicate a Vue component instance after mounting it with new DOM? I am currently working on coding a template builder and I need to clone some blocks. Similar to the duplicate feature on this website ...

Which specific values could cause the function to fail?

I am considering implementing the function provided below: function removeDuplicates(array){ var output=[],object={}; for(var index=0,length=array.length;index<length;index++){ object[array[index]]=0; } for(index in object){ ...

Tips for showcasing a string value across various lines within a paragraph using the <br> tag for line breaks

I'm struggling to show a string in a paragraph that includes tags to create new lines. Unfortunately, all I see is the br tags instead of the desired line breaks. Here is my TypeScript method. viewEmailMessage(messageId: number): void { c ...

Custom AG Grid PCF Control - Styling without the need for a separate CSS loader

Struggling to implement AG Grid in a PCF control because CSS loaders are not supported. Are there any alternatives for adding CSS without using CSS loaders? Thanks. Source - "‎06-22-2020 11:38 AM Ah I see - the only supported way of including CSS ...

Generate a unique identifier for the HTML content

Is there a more efficient way to assign unique id tags to certain words using vanilla javascript? For example: <p>All the king's horses ran away.</p> For instance, "All" would have the id "term1", "King's" would have "term2", and ...

"Utilize Ajax to dynamically generate options in a dropdown menu with multiple

I am having trouble populating my multiple dropdown list using AJAX. The dropdown list is dependent on another single selection dropdown list. Here is the HTML code: <div class="form-group"> <label for="InputGender">Select Course</ ...

Issue with aligning the image product in Bootstrap 4

I'm currently working on creating a basic online shopping page for my PHP training, and I've run into a bit of a roadblock with the HTML portion. Even after using Bootstrap, I'm still struggling to simplify things. When I view the result of ...

Discover the method to retrieve the chosen value from a list of radio buttons using AngularJS

After making an AJAX request and receiving JSON data, I have created a list of radio buttons with values from the response. Although I have successfully bound the values to the list, I am facing difficulty in retrieving the selected value. Below is a snipp ...

Is it true that setting the background size to cover does not actually stretch the image?

Hi, I seem to be having trouble stretching an image using the background-size property. Despite setting it to cover, one or two sides of the image are always getting cropped. What I really want is a way to distort the image so that it stretches to fit any ...

Graph not displaying dates on the x-axis in flot chart

I've been attempting to plot the x-axis in a Flot chart with dates. I've tried configuring the x-axis and using JavaScript EPOCH, but have had no success so far. Here's a snippet of my code: <?php foreach($data[0] as $i => $d){ ...

Determine if the HTML Application Cache is void

Our website uses a "manifest.appcache" file to manage the application cache. Some pages are designed to be accessed offline, so they have references in the html tag to the manifest, while others do not. Is there a way to determine if the cache is empty ac ...

Eliminate every instance using the global regular expression and the replace method from the String prototype

function filterWords(match, before, after) { return before && after ? ' ' : '' } var regex = /(^|\s)(?:y|x)(\s|$)/g var sentence1 = ('x 1 y 2 x 3 y').replace(regex, filterWords) console.log(sentence1) sentence2 ...

What is the best way to customize the label of Material UI's Tab component?

Is there a way to customize the text color inside the Tab component while still allowing it to change color when selected as an active Tab? For example: <Tabs centered onChange={handleChange} value={value} textColor={'secondary'} indicatorCol ...

What is the best way to include additional columns in a multiselect dropdown using jQuery select2?

I have implemented a multiselect dropdown feature using the jQuery select2 JavaScript library. The list items in this dropdown pertain to various medical drugs. I am looking to enhance this feature by adding a new column next to each selected drug, where ...

Unlocking the res property in index.js from an HTML script tag: A step-by-step guide

Can anyone help me with the access variable issue I am facing? I have two files, index.js and page.ejs. These files require me to create a timer linked with datetimes stored on my local server. //index.js.. router.get('/mieiNoleggi', functio ...

Is there a way to ensure a Javascript alert appears just one time and never again?

I struggle with Javascript, but I have a specific task that needs to be completed. I am participating in a school competition and need an alert to appear only once throughout the entire project, not just once per browsing session. The alert will inform ...

What is the best way to redirect users to the login page when they are logged out from a different tab or window?

Ensuring user authentication and managing inactivity are crucial components of my Nodejs application, where I leverage cookie-session and passport.js. app.use(require("cookie-session")({ secret:keys.session.secret, resave:false, saveUninitiali ...

Trouble with Hero Unit Styles not being implemented

Looking to convert a PSD design to HTML using Bootstrap, but the hero unit is not displaying its default style as expected. <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> ...