Show an <input /> element when a <div> is transitioning

My current configuration is as follows:

.wrapper {
  height: 40px;
  width: 80px;
  border-style: solid;
  border-width: 2px;
  border-radius: 40px;
  border-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.element {
  background-color: hotpink;
  width: 10px;
  height: 10px;
}

.wrapper:hover {
  width: 800px;
  -webkit-transition: width 0.4s ease-in-out;
  justify-content: left;
  padding-left: 35px;
}

.text-input {
  display: none;
}

.wrapper:hover .text-input {
  display: block;
}
<div>
  <div class=wrapper>
    <div class=element>
      <input class=text-input type="text" name="search" />
    </div>
  </div>
</div>

https://codepen.io/anon/pen/BOzJxL

I am looking to have the text input field appear next to the div element with a hot pink background. It should stay in place when the input appears and be revealed gradually pixel by pixel. When moving away from the div, I want the input field to hide again, following the same style as it was initially revealed.

javascripthtmlcss

Answer №1

Here is a solution that should do the trick.

.container {
  height: 40px;
  width: 75px;
  border-style: solid;
  border-width: 2px;
  border-radius: 40px;
  border-color: red;
  display: flex;
  align-items: center;
  padding-left:30px;
  -webkit-transition: width 0.4s ease-in-out;
  box-sizing:border-box;
}

.box {
  background-color: hotpink;
  width: 10px;
  height: 10px;
}

.container:hover {
  width: 100%;
}

.input-field {
  max-width: 0;
  float: left;
  padding: 0px;
  border: 0px transparent;
  -webkit-transition:max-width 0.6s ease-in-out;
  transition:max-width 0.6s ease-in-out;
}

.container:hover .input-field {
  max-width: 50%;
  padding: 2px;
  border: 1px solid #d4d4d4;
}
<div class="container">
  <div class="box"></div>
  <input class="input-field" type="text" name="search" />
</div>

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

Removing a key from an index signature in Typescript - a step-by-step guide

In my web application built with Angular, we encountered a need for a data type to store translations of strings in different languages. To address this requirement, a team member defined the following type: export class TranslatedString { [language: str ...

javascriptangulartypescriptindex-signature

The file or directory '/var/task/google-cloud-key.json' does not exist: ENOENT error on Vercel

Can you please assist me in resolving this issue? The location of my JS file is within the Next JS app > pages/api/profile, while google-cloud-key.json resides in the root folder of the Next JS app alongside the package.json file. While everything fun ...

javascriptnode.jsreactjsnext.jsvercel

Internet Explorer encounters errors when processing LESS code

Currently experimenting with the combination of LESS and respond.js to facilitate the development of a new website. Both LESS and respond are incredibly useful tools. However, encountered several issues with LESS in Internet Explorer. Initially, while in ...

javascriptless

Converting a string to a date type within a dynamically generated mat-table

I am working on a mat-table that shows columns for Date, Before Time Period, and After Time Period. Here is the HTML code for it: <ng-container matColumnDef="{{ column }}" *ngFor="let column of columnsToDisplay" > ...

javascripthtmlangulartypescript

How can we manage JSON data in chunks during a progress event?

My dilemma involves dealing with a server request that may bring back a substantial JSON list (around 100K records, approximately 50 Mb) of points to be presented on a canvas using D3js. To ensure interactivity and save memory, I am keen on rendering them ...

javascriptjsond3.jsxmlhttprequestchunked-encoding

Iterating using a for loop within different functions

I am facing an issue with this project. I am planning to create a function that calculates from two different `for()` loops. The reason behind having 2 separate functions for calculation is because the data used in the calculations are fetched from differe ...

javascriptarraysjsonreactjsloops

What is the best way to set jade as a global variable in a node.js Express application?

Currently, the routing function shown below is operational: exports.summary = function(req, res, next) { var jade = require('jade'); res.render('myView', { main: jade.renderFile('./views/summary.jade') }); }; The ...

javascriptnode.jsexpressincludepug

Should we avoid styling HTML tags?

Would it be considered poor practice, for instance, to apply the following CSS rules to all images on my webpage in order to make them responsive: img { display: inline-block; height: auto; max-width: 100%; } Instead of using img-responsive on each ...

htmlcss

Uncheck all boxes except for the required or disabled boxes in Angular

HTML: <mat-selection-list #selectedColumns [(ngModel)] ="selectedOptions"> <div class= "content-section"> <mat-expansion-panel> <mat-expansion-panel-header> ...

htmlangularcheckboxvoiddeselect

Adjusting size of a div as you scroll - Java Script

Using the codepen provided at http://codepen.io/anon/pen/fDqdJ, I am looking to enhance the functionality by implementing a feature where, upon reaching a specific distance from the top of the page, an already animated div undergoes a change in scale while ...

javascriptjqueryhtmlcsstransform

Performing an Ajax call in the correct order within an MVC framework

One challenge I face is ensuring that my series of Ajax calls to call stored procedures and load partial views always fire in the correct order. Sometimes, they do not fire as expected due to timing issues. How can I guarantee that these Ajax calls execu ...

javascriptjqueryajaxasp.net-mvcasp.net-mvc-5

Node.js and Express make it easy to provide XLS download functionality

I have successfully utilized the code snippet below to generate an excel file in node.js. My intention is for this generated file to be downloadable automatically when a user clicks on a designated download button. var fs = require('fs'); var w ...

javascriptnode.jsexcelexpress

JavaScript code failing to return array contents

As I navigate through the realms of NodeJS application development handling .nessus result files, I encounter an intriguing behavior quandary when generating an array of numbers. The primary goal is to create an array [1234,1223,1222] from a "results" file ...

javascriptarraysnode.js

The application appears differently on a phone compared to how it looks on the ripple platform

Recently started experimenting with Apache Cordova, attempting to create a basic application. Here is how it looks in Google Chrome using Ripple for PhoneGap/Cordova emulation: https://i.sstatic.net/2MSwl.png When I click on the button, this is the resul ...

androidhtmlcsscordovaripple

An external script containing icons is supposed to load automatically when the page is loaded, but unfortunately, the icons fail to display

Hello and thank you for taking the time to read my query! I am currently working in a Vue file, specifically in the App.vue where I am importing an external .js file containing icons. Here is how I import the script: let recaptchaScript2 = document.creat ...

javascriptvue.jsvuejs2vue-component

Personalizing your bootstrap icons

I am looking to personalize the LinkedIn icon from Bootstrap. I would like to include a link, adjust the size, and change the color. Can you please provide guidance on how to achieve this? <i class="bi bi-linkedin"></i> ...

htmlbootstrap-4

I am looking to create a password generator that saves all generated options to a file

I am looking to create a custom password generator that writes all generated options to a file. For example, using the numbers "0123456789" and having a password length of 3 characters. However, I am facing an issue with the file writing process where it ...

javascriptnode.js

Different CSS methods

I'm in the process of building a page with 4 unique sections, each containing a responsive image with text and buttons overlaid. Currently, the alignment is slightly off-center and favoring the right side. My goal is to have the text and buttons float ...

phphtmlcsswordpressevent-handling

Utilize Three.js to seamlessly incorporate mesh information directly into your code

Here's my Three.js code that loads a mesh from the file /models/mountain.json using a JSON loader: var Three = new function () { this.scene = new THREE.Scene() // Camera setup this.camera = new THREE.PerspectiveCamera(45, window.innerWid ...

javascriptjsonthree.js

Extract particular elements from an array and transform them into a new array

Presented below is an array: [{ "title": "Apple iPhone 7 Plus 32 GB", "category": "phone", "brand": "apple", "condition": "Used", "price": 800, "id": 0, "description": "Apple" }, { "title": "Apple Ipad Air 32 GB", "category": "tablet", "brand ...

javascriptarraysjson