Move the input field upwards

Question

Move the input field upwards

I have a button that I want to trigger a new input field to slide up when hovered, giving the effect of it coming from behind the button.

Initially, I attempted to achieve this using only CSS by manipulating the height of the surrounding form with overflow: hidden. However, this caused the button to fade out rather than the desired input field. Is there any way to change this behavior, perhaps through a specific browser tweak?

Now, I am exploring jQuery as an alternative solution, although I am not experienced in using it. I am hopeful that someone can provide assistance to make it function correctly.

The key adjustment needed is changing the value of margin from 0 auto -3px to 0 auto -31px.

For reference, here is my example.

jquery css css-transitions

Answer 1

Answer №1

If you want to achieve this effect without relying on JavaScript, simply create a wrapping div element.

For example, I created a div with the class "some" (admittedly not the most imaginative choice). When you hover over this div, an input field within it is revealed.

Here's the CSS code:

.some {
    display: inline-block;
}

.some:hover .l-input {
    margin: 0 auto -3px; 
}

.l-button {
    text-transform: uppercase;
    margin: 0 auto;
    display: block;
    width: 7em;
    position: relative;
    cursor: pointer;
}

.l-input {
    margin: 0 auto -31px;
    text-align: center;
    text-transform: uppercase;
    width: 5.9em;
    position: relative;
    height: 1.25em;
    display: block;
}

You can view a working example on JSFiddle at http://jsfiddle.net/c3Veu/.

Update:

Take a look at another demo here: http://jsfiddle.net/sbNym/.

This time, I used absolute positioning so that the input field appears to emerge from behind the rest of the content. Enjoy! (:

Answer 2

If you want to achieve this effect without relying on JavaScript, simply create a wrapping div element.

For example, I created a div with the class "some" (admittedly not the most imaginative choice). When you hover over this div, an input field within it is revealed.

Here's the CSS code:

.some {
    display: inline-block;
}

.some:hover .l-input {
    margin: 0 auto -3px; 
}

.l-button {
    text-transform: uppercase;
    margin: 0 auto;
    display: block;
    width: 7em;
    position: relative;
    cursor: pointer;
}

.l-input {
    margin: 0 auto -31px;
    text-align: center;
    text-transform: uppercase;
    width: 5.9em;
    position: relative;
    height: 1.25em;
    display: block;
}

You can view a working example on JSFiddle at http://jsfiddle.net/c3Veu/.

Update:

Take a look at another demo here: http://jsfiddle.net/sbNym/.

This time, I used absolute positioning so that the input field appears to emerge from behind the rest of the content. Enjoy! (:

Answer 3

Answer №2

Consider using this HTML code:

<div id="content">
    <input type="text" name="application" class="custom-input">
    <button type="button" value="Submit" class="custom-button">code</button>
</div>

Next, add this Script:

$(document).ready(function () {
    $('.custom-button').mouseover(function () {
        $('.custom-input').animate({ bottom: '40px' });
    });
    $('.custom-input').mouseleave(function () {
        $('.custom-input').animate({ bottom: '6px' });
    });
});

Finally, incorporate this CSS:

body {
    padding: 5em;
}

#content {
    position: relative;
    width: 90px;
}

input {
    background: transparent;
    border: 1px solid rgba(155,86,77,0.2);
    /* Additional styles here */
}

.custom-input:active,
.custom-input:focus {
    /* Additional styles here */
}

button {
    /* Button styles here */
}

.custom-button {
    /* Custom button styles here */
}

.custom-input {
    margin: 0 auto -3px;
    text-align: center;
    /* Additional input styles */
}

Answer 4

Consider using this HTML code:

<div id="content">
    <input type="text" name="application" class="custom-input">
    <button type="button" value="Submit" class="custom-button">code</button>
</div>

Next, add this Script:

$(document).ready(function () {
    $('.custom-button').mouseover(function () {
        $('.custom-input').animate({ bottom: '40px' });
    });
    $('.custom-input').mouseleave(function () {
        $('.custom-input').animate({ bottom: '6px' });
    });
});

Finally, incorporate this CSS:

body {
    padding: 5em;
}

#content {
    position: relative;
    width: 90px;
}

input {
    background: transparent;
    border: 1px solid rgba(155,86,77,0.2);
    /* Additional styles here */
}

.custom-input:active,
.custom-input:focus {
    /* Additional styles here */
}

button {
    /* Button styles here */
}

.custom-button {
    /* Custom button styles here */
}

.custom-input {
    margin: 0 auto -3px;
    text-align: center;
    /* Additional input styles */
}

Move the input field upwards

Answer №1

Answer №2

Similar questions

Using jQuery to slide in dynamically generated content

Dynamic file name and title for jQuery Datatables Export Buttons

Retrieve data from a text file using ajax and then return the string to an HTML document

Unusual CSS media queries behavior

The navigation bar designed with flex boxes is experiencing an issue where the "Login" button positioned on the right is being partially hidden

HTML / CSS / JavaScript Integrated Development Environment with Real-time Preview Window

The information being transferred from a jQuery Ajax request to an MVC ApiController Action is disappearing

Using the use tag for SVG fills is a great way to

Enhancing Security and Improving Performance with Subresource Integrity and Cache Busting Methods in

What is the method for incorporating an upward arrow into a select element, while also including a downward arrow, in order to navigate through options exclusively with

When using NextJs, running the commands 'npm build' and 'npm start' can sometimes cause style inconsistencies

Using Jquery to dynamically load an aspx page into a specific div element

Having trouble with elFinder? Encountering an error stating "Undefined is not a function" when attempting to

Trying to display and conceal images based on the screen size of the device

Is there a way to substitute a custom <form> element for the default <form> in an already existing plugin?

The dimensions of Bootstrap 4.0 card images vary

Having trouble with crooked Mailchimp text boxes?

Discovering a collection of class elements with particular text in Selenium IDE

Transform the color of Max Mega Menu items on hover with another item in WordPress

swapping out an input parameter