Home>

How to implement the promotion of text from the block? I want the text to smoothly appear from the logo

  • Answer # 1

    Use propertiesposition: relativeandtop; right; bottom; leftto move the block relative to its current position. You can hide text before it appears withopacity: 0andvisibility: hidden;(use together asvisibilitydoes not animateopacitydoes not actually hide the text and can still be selected with the mouse).

    I used to do something like this. You can modify to suit your needs.

    h1 {
      position: relative;
      left: -2rem;
      margin: 0;
      font: normal bold 3rem/1.2 "Arial", sans-serif;
      opacity: 0
      visibility: hidden;
      transition: .3s;
    }
    .logo {
      height: 2.5rem;
      cursor: pointer;
    }
    .logo:hover + h1, h1:hover {
      opacity: 1
      visibility: visible;
      left: 0;
    }
    .container {
      display:flex;
      align-items: center;
    }
    <div class="container">  <img
        src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"
        class="logo"
      >  <h1>Google</h1></div>
  • Answer # 2

    Use propertiesposition: relativeandtop; right; bottom; leftto move the block relative to its current position. You can hide text before it appears withopacity: 0andvisibility: hidden;(use together asvisibilitydoes not animateopacitydoes not actually hide the text and can still be selected with the mouse).

    I used to do something like this. You can modify to suit your needs.

    h1 {
      position: relative;
      left: -2rem;
      margin: 0;
      font: normal bold 3rem/1.2 "Arial", sans-serif;
      opacity: 0
      visibility: hidden;
      transition: .3s;
    }
    .logo {
      height: 2.5rem;
      cursor: pointer;
    }
    .logo:hover + h1, h1:hover {
      opacity: 1
      visibility: visible;
      left: 0;
    }
    .container {
      display:flex;
      align-items: center;
    }
    <div class="container">  <img
        src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"
        class="logo"
      >  <h1>Google</h1></div>