The parent's backdrop remains static and does not shift or change

I am looking to create a transition effect for when I hover over a link that will smoothly display text afterwards.

This is the current code I have:

p {
    border-radius: 1em;
    padding: 0.5em;
    background-color: chocolate;
    display: inline-block;
    width: auto;
    transition: width 1s;
}

p>span {
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
    transition: all 1s;
}

p:hover>span {
    max-width: 100%;
}
<p>
  <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="503a3f383e7e343f35102335222635227e333f3d">[email protected]</a>">@</a>
  <span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="177d787f7939737872576472656172653974787a">[email protected]</a></div>
</p>

While the text slides in smoothly, the background does not follow suit. How can I make the background slide as well?

csscss-transitions

Answer №1

There are several issues in your code that need to be addressed.

  1. You have a closing div tag but no corresponding opening div tag.
  2. You are applying a width to both the p and span elements, when only one is necessary.
  3. The email link only seems to include the @ symbol, which may not provide the best user experience. Please confirm if this is intentional.

I made some adjustments to your code so that it now includes background animation along with the email link.

If you prefer not to make the whole email address clickable, you can move the span element outside of the a tag while keeping everything else the same.

p {
  border-radius: 1em;
  padding: 0.5em;
  background-color: chocolate;
  display: inline-block;
  transition: all 1s;
  overflow: hidden;
  max-width: 15px;
  white-space: nowrap;
}

p:hover {
  max-width: 100%;
}

p span {
  margin-left: 8px;
}
<p>
  <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abc1c4c3c585cfc4ceebd8ced9ddced985c8c4c6">[email protected]</a>">@<span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="157f7a7d7b3b717a70556670676370673b767a78">[email protected]</a></span></a>
</p>

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

The utilization of the <span> tag featuring a {float:right] property causes container expansion in Internet Explorer 7

Within my HTML code, I have an A tag button that contains a Span element to hold icons. This setup functions correctly in most browsers, except for IE7. When I attempt to float the Span to the right side using CSS, it causes issues specifically in IE7, cau ...

htmlcsscss-float

Is it possible to target elements within a UMAP iframe using CSS?

I have integrated a uMap map into my website. Here is the code: <iframe id="umapiframe" class="iframe-umap" width="100%" height="300px" frameborder="0" allowfullscreen src="//umap.openstreetmap.fr/f ...

javascriptcssgoogle-mapsiframeselector

What is the best way to extend an image to fill the width of a webpage?

Can you advise me on how to expand the image to fit the width of my webpage? If possible, could you take a look at this website: Poklanjam The specific image I am referring to is the one of the city on the left-hand side. What additional CSS code should ...

csswordpress

Footer remains attached after the absolute wrapper is positioned

Is there a way to horizontally center a wrapper without using position absolute? #wrapper { width: 721px; height: 720px; position: absolute; margin: auto; top: 136px; left: 0; right: 0; background: white; clear: both; ...

htmlcssfootersticky-footer

What is the best way to align text in the center of a line, while also floating a button to its right?

I am trying to create a simple layout, but I'm having some difficulty. My goal is to have a centered header within a parent div, with a button aligned to the right of the header on the same line. While I was able to achieve this visually, the button i ...

htmlcss

Creating a webpage with a layout that features three full-length columns using

body { background-color: blueviolet; } .leftcolumn { width: 30%; height: 100%; float: left; background-color: brown; } .middlecolumn { float: left; background-color: yellowgreen; width: 60%; height: 100%; } <body> <div class= ...

htmlcss

Verify the compatibility of a mobile browser with CSS and javascript functionality

Currently working on a mobile site project where I plan to create two versions - one with a heavy focus on JavaScript and CSS, and another more basic version using simple XHTML for older phones. Is there a way to automatically redirect users based on thei ...

cssbrowserhttp-redirectmobile

background-attachment: fixed causing issues with background-size

I've set up a background image that is scaled to fit inside its container, with fallbacks in place for browsers that do not support background-size when detected by Modernizr. .wrap { width: 200px; height: 116px; position: absolute; b ...

androidmobile-safaricssbackground-attachment

Using force-directed layout to access and retrieve specific data from external or internal data sources

Just starting out with d3js and currently working on modifying the Force directed layout found at http://bl.ocks.org/mbostock/1153292 I have managed to make it so that when I hover over the node circles, the corresponding source value filenames should app ...

javascripthtmlcssjson

The scroll feature is not functioning properly in detecting the CSS function for the final div

$(document).ready(function() { $(document).on("scroll", onScroll); //smoothscroll $('a[href^="#"]').on('click', function(e) { e.preventDefault(); $(document).off("scroll"); $('a').each(func ...

javascriptjqueryhtmlcss

What is the best way to add a sliding effect to this presentation?

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow I am attempting to create a sliding effect for image transitions instead of the typical fade in and out. However, I'm uncertain about how to approach this challenge. My concept i ...

javascripthtmlcss

When <ul> elements overflow to the next line in XHTML and CSS

I need to control the display of a list of items (<ul> with <li>'s) by setting a height limit. Consider the following code: <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li& ...

htmlruby-on-railscssxhtml

The floating label effect will be removed when the required attribute is removed as well

Is there a method to achieve a floating label effect in Bootstrap 4 even after removing the "required" attribute from the input field? $(document).ready(function() { $('.form-group input').on('focus', function() { $(this).sibli ...

javascripthtmljquerycssbootstrap-4

Having trouble managing external CSS files on Django 1.3 development server

Trying to get external CSS files to work on the Django 1.3 development server has been a challenge. Despite reading through Django's 'managing static files' guide and various similar Stack Overflow questions, I still can't seem to figur ...

cssdjangoweb-applications

"The space between the header-main section and the main-footer section is pure white

I'm facing an issue with the white space between the header-main and main-footer sections. I would like to either match their color to the rest of the website or completely remove the space. The color I want to use is #fefcf5. I hope this edited versi ...

htmlcss

How to prevent the toolbar from overlapping with the background image in a reactjs

Hey there, I'm looking to create a toolbar with an image in the background. To achieve this, I've created two separate components. First up is the image component: import React from 'react'; import thepic from '../mypic.jpg'; ...

cssreactjsreact-bootstrapinline-styles

Scrolling the inner container in a CSS flexbox layout: tips and tricks

I'm currently working on designing a flex box based HTML layout like the one shown in the image link provided below. https://i.stack.imgur.com/nBl6N.png The layout should consist of 3 rows within the viewport with the following structure: - top: " ...

htmlcssflexbox

Unable to adjust the width of a label element using CSS specifically in Safari browsers

Here's the issue I'm facing with my HTML code <input type="checkbox" asset="AAA" name="assets[AAA]" value="AAA" id="assets[AAA]" class="c_green" checked="checked"> <label for="assets[AAA]"></label> In my CSS, I have the follow ...

javascripthtmlcsssafari

CSS Troubleshooting: Image failing to load

Having an issue with bootstrap/css. I'm trying to load an image from the source folder using this CSS code: background: url('../img/home.jpg') no-repeat; Unfortunately, the image is not showing up in my home section on the page. https://c ...

htmlcssbootstrap-4

How to insert an image into a placeholder in an .hbs Ember template file

I'm looking to enhance a .hbs template file in ember by incorporating an image. I am not a developer, but I'm attempting to customize the basic todo list app. <section class='todoapp'> <header id='header'> & ...

javascriptcssember.js