What is the best way to have two text-divs overlapping within a single wrapper div?

In a wrapper div, there are two inner divs with different text. The goal is to change the text on hover and position the second text div exactly where the first text div is. 

.wrapper {
  background: red;
  width: max-content;
  padding: 20px;
}

.text1 {
  background: green;
  opacity: 1;
  transition: all 0.5s;
}

.text2 {
  background: yellow;
  opacity: 0;
  transition: all 0.5s;
}

.wrapper:hover>.text1 {
  opacity: 0;
}

.wrapper:hover>.text2 {
  opacity: 1;
}
<div class="wrapper">
  <div class="text1">Text 1</div>
  <div class="text2">Text 2</div>
</div>

Is it possible to overlap two text-divs within one wrapper div?

This Stackoverflow post discusses an overlapping issue, but my situation requires adjusting the wrapper dimensions to match the text size.

javascripthtmlcsshover

Answer №1

To create an interesting layout, you can use absolute positioning for the second text div. Set its top position to be the same as the padding of the wrapper div:

.wrapper {
  background: red;
  width: max-content;
  padding: 20px;
}

.text1 {
  background: green;
  opacity: 1;
  transition: all 0.5s;
}

.text2 {
  background: yellow;
  opacity: 0;
  transition: all 0.5s;
}

.wrapper:hover>.text1 {
  opacity: 0;
}

.wrapper:hover>.text2 {
  opacity: 1;
}

.text2 {
  position: absolute;
  top: 20px;
}

.wrapper {
  position: relative;
}
<div class="wrapper">
  <div class="text1">Text 1</div>
  <div class="text2">Text 2</div>
</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

What is the best way to leverage multiple random YouTube v3 API keys simultaneously?

I have the following code snippet and I am looking to randomly select an API key from a list of keys: function search() { // Clear Results $('#results').html(''); $('#buttons').html(''); // Get Form Input ...

javascriptjsonapiyoutube-apiyoutube-javascript-api

Using JavaScript with namespaces in C#

I am currently trying to explore AJAX and web services through self-teaching using C# and JavaScript. After doing some research on Google, it seems like I might be facing a namespace problem. Here is the snippet of my code: using System; using System.Col ...

c#javascriptajaxweb-services

Is it possible to retrieve the complete file path in a form?

My goal is to retrieve a file using an input element of type "file". This element is located within a partial view, and I need to send it to the controller or request it there using "Request.Form["inputFile"];". However, this method only provides me with t ...

javascriptc#htmlasp.net-corerazor-pages

The function buf.writeBigUInt64BE is not recognized as a valid function and returns an undefined error

I'm attempting to implement the code below on my React Native iOS device: import { Buffer } from "buffer"; const buf = Buffer.alloc(8) buf.writeBigUInt64BE(BigInt(123), 0) const value = buf.readBigUInt64BE(0) console.log(value) However, I&a ...

javascriptnode.jsreactjsreact-native

JavaScript Slide Show using setInterval()

Need some help with JavaScript! I have a slide and I want to add a button to either make it autoplay or stop it. When I just use an Alert inside the function, it works, but when I add the interval code, it won't. Check out my codepen link Here is the ...

javascripthtmlcssslidersetinterval

Are you experiencing font compatibility issues on iOS devices? Is it possible that only certain fonts are not displaying correctly?

Working on a mobile landing page specifically tailored for iPhones, I want to make Rockwell the h1 font on the page. Here is the URL that I am referring to: radionowheremusic.com/mobile7.html Interestingly, when I view the page on my phone, the header fo ...

htmlioscssfonts

What steps should I take to resolve the issue of 'this.reduce() not being a function'?

Here is my code : app.get("/", (req, res) => { const reducer = (acc, guildCount) => acc + guildCount; const results = client.shard.fetchClientValues('guilds.cache.size'); console.log(results) let guildCount ...

javascriptnode.jsexpress

Sending Data from Browser to Node.js using Ajax

I've been struggling to send an AJAX post request to my Node server built with Express for a while now. Despite reading various solutions on similar issues, I couldn't figure out which files to edit. Initially, I attempted using `http.createServe ...

javascriptajaxnode.jsexpress

Is there a way to dynamically create a property and assign a value to it on the fly?

When retrieving data from my API, I receive two arrays - one comprising column names and the other containing corresponding data. In order to utilize ag-grid effectively, it is necessary to map these columns to properties of a class. For instance, if ther ...

javascripttypescriptag-grid

Exploring the front side of a cube using three.js

Exploring the following example: I am curious to know whether it's possible to determine which side of the cube is facing the camera, i.e., the front side. So far, I have been unable to figure this out. Any assistance on this matter would be greatly ...

javascriptthree.jswebglcubes

Creating a responsive 'media object' in Bootstrap 4: Tips and tricks

I have a media object that displays an image with text next to it, and it looks good on larger screens. However, when I switch to a smaller screen, the text overflows and the images appear in different sizes and positions. <div class="container&quo ...

htmlcssbootstrap-4media-queries

Integrating Query String Parameters into GridView Item Templates

Within my gridview, I have a hyperlink located in the first column. When this hyperlink is clicked, the user is directed to Vendor.aspx. I now need to pass the consumer ID (from the clicked row) as a query string to Vendor.aspx. What is the most effective ...

c#javascriptasp.net.net

Discover the underlying data within a nested JSON structure and track back to identify the corresponding values

In the JSON structure provided below, Suppose I have the chapter "number" and section "number". What is the most efficient way to search and trace backwards starting from what I already know, in order to find the "number" of the title within titles and t ...

javascriptarraysjson

"Troubleshooting JQuery: Dealing with Errors in Ajax Get

I'm attempting to make a call to a PHP script using a GET request and passing the data theaddress, but the results are displaying the source code of the page I'm trying to call. The page I'm trying to call can be found here. Here is my AJAX ...

javascriptphpjqueryajaxget

Packaging an Angular project without the need for compiling

In order to enhance reusability, I structured my Angular 6 Project into multiple modules. These modules have a reference to a ui module that contains all the style sheets (SASS) as values such as: $primary-text-color: #dde7ff !default; Although this app ...

cssangularmodulesassangular6

Setting the default value for a dropdown in Angular 2 using Kendo UI

I'm currently facing an issue with creating a dropdownlist using Kendo UI. The problem arises when I try to set a default selected value upon loading the screen. Referring to their documentation, my code is structured like this: HTML: <kendo-drop ...

javascriptangulardrop-down-menukendo-ui

Combining HTML, PHP, and Ajax within a single document

Hey everyone! I'm diving back into web programming and challenging myself to create a simple mailing form using just HTML, PHP, and Ajax all within a single file. The goal is to have a self-contained HTML document that doesn't refresh when the fo ...

phphtmlajax

Is there a way to logout when the select event occurs using the key?

I am trying to figure out how to log out the key value when the select event is triggered. Specifically, I want to access the key={localState.id} within the <select></select> element in my HTML. This key value is crucial for a conditional stat ...

javascriptreactjstypescript

The Splitter remains inactive until a peculiar series of actions is taken

Trying to troubleshoot this issue with a library called Split.js, which can be found here: https://github.com/nathancahill/Split.js I've encountered an interesting problem where I have to disable the height CSS property of my container, move the spli ...

javascriptjqueryhtmlcsssplitter

Automating the compression of JavaScript with YUI Compressor, excluding specific files

I came across a helpful solution on this Stack Overflow thread: How can I automate the compression of JavaScript files using YUI Compressor? But here's my dilemma: I have a bunch of jQuery files in my ~/Scripts directory that are already compressed ...

javascriptobfuscationminifywindows-shellyui-compressor