Home > Software engineering >  Make text appear on hover (and push icon out)
Make text appear on hover (and push icon out)

Time：04-26

I have some cards which has hidden text that I'm trying to make appear on hover.

The effect I'm trying to go for is that the width of .ctaCard__footer--hidden grows slowly on hover, which pushes the icon to the right nicely (and the reverse when exiting hover state).

I have tried setting width: 0, but the issue I had was the ctaCard visually grew on hover because the text was on two lines (because the width was being based on transition). So I then tried a display oriented approach, which isn't smooth (cannot get the animation to work).

Here is what I have:

:root {
  --white: #FFFFFF;
  --black-2: #2C3645;
}

.ctaCards {
  background-color: #E7E6E0;
  padding: 100px 0;
}

.ctaCards .ctaCard {
  border-radius: 10px;
  box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.08);
  padding: 44px 43px 54px 43px;
  max-width: 340px;
  margin: 0 auto 60px auto;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.ctaCards .ctaCard:hover .ctaCard__footer svg path {
  fill: var(--black-2);
}

.ctaCards .ctaCard:hover .ctaCard__footer-text {
  width: auto;
}

.ctaCards .ctaCard:hover .ctaCard__footer--hidden {
  width: auto;
  display: block;
}

.ctaCards .ctaCard__header {
  margin-bottom: 25px;
}

.ctaCards .ctaCard__body {
  flex: 1;
}

.ctaCards .ctaCard__footer {
  margin-top: 30px;
}

.ctaCards .ctaCard__footer-text {
  margin-right: 20px;
  width: 0;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

.ctaCards .ctaCard__footer--hidden {
  width: 0;
  display: none;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

.ctaCards .ctaCard__footer--visible {
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

.background--white {
  background-color: var(--white);
}

.flex-align {
  display: flex;
  align-items: center;
  justify-content: center;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<section >
  <div >
    <div >

      <div >
        <figure >

          <div >
            <span >Subheader</span>
          </div>

          <div >
            <div >
              <span >Learn more</span>
            </div>
            <div >
              <svg id="Group_397" data-name="Group 397" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
                <g id="Icon_ionic-ios-arrow-dropright" data-name="Icon ionic-ios-arrow-dropright">
                  <path id="Path_14" data-name="Path 14" d="M14.665,10.244a.823.823,0,0,1,1.2,0l4.2,4.44a.929.929,0,0,1,.026,1.234l-4.14,4.376a.82.82,0,0,1-1.2,0,.929.929,0,0,1,0-1.267l3.519-3.763-3.607-3.763A.919.919,0,0,1,14.665,10.244Z" transform="translate(-4.866 -2.77)" fill="#089f84" />
                  <path id="Path_15" data-name="Path 15" d="M3.375,15.875a12.5,12.5,0,1,0,12.5-12.5A12.5,12.5,0,0,0,3.375,15.875Zm1.923,0A10.573,10.573,0,0,1,23.351,8.4,10.573,10.573,0,1,1,8.4,23.351,10.486,10.486,0,0,1,5.3,15.875Z" transform="translate(-3.375 -3.375)" fill="#089f84" />
                </g>
              </svg>
            </div>
          </div>

        </figure>
      </div>

      <div >
        <figure >

          <div >
            <span >Subheader 2</span>
          </div>

          <div >
            <div >
              <span >Learn more</span>
            </div>
            <div >
              <svg id="Group_397" data-name="Group 397" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
                <g id="Icon_ionic-ios-arrow-dropright" data-name="Icon ionic-ios-arrow-dropright">
                  <path id="Path_14" data-name="Path 14" d="M14.665,10.244a.823.823,0,0,1,1.2,0l4.2,4.44a.929.929,0,0,1,.026,1.234l-4.14,4.376a.82.82,0,0,1-1.2,0,.929.929,0,0,1,0-1.267l3.519-3.763-3.607-3.763A.919.919,0,0,1,14.665,10.244Z" transform="translate(-4.866 -2.77)" fill="#089f84" />
                  <path id="Path_15" data-name="Path 15" d="M3.375,15.875a12.5,12.5,0,1,0,12.5-12.5A12.5,12.5,0,0,0,3.375,15.875Zm1.923,0A10.573,10.573,0,0,1,23.351,8.4,10.573,10.573,0,1,1,8.4,23.351,10.486,10.486,0,0,1,5.3,15.875Z" transform="translate(-3.375 -3.375)" fill="#089f84" />
                </g>
              </svg>
            </div>
          </div>

        </figure>
      </div>

    </div>
  </div>
</section>

CodePudding user response：

If you add white-space: nowrap to your footer text, you can then animate your width and margin:

:root {
  --white: #FFFFFF;
  --black-2: #2C3645;
}

.ctaCards {
  background-color: #E7E6E0;
  padding: 100px 0;
}

.ctaCards .ctaCard {
  border-radius: 10px;
  box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.08);
  padding: 44px 43px 54px 43px;
  max-width: 340px;
  margin: 0 auto 60px auto;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.ctaCards .ctaCard:hover .ctaCard__footer svg path {
  fill: var(--black-2);
}

.ctaCards .ctaCard:hover .ctaCard__footer-text {
  width: 5em;
  margin-right: 20px;
}

.ctaCards .ctaCard:hover .ctaCard__footer--hidden {
  width: auto;
  display: block;
}

.ctaCards .ctaCard__header {
  margin-bottom: 25px;
}

.ctaCards .ctaCard__body {
  flex: 1;
}

.ctaCards .ctaCard__footer {
  margin-top: 30px;
}

.ctaCards .ctaCard__footer-text {
  display: inline-block;
  white-space: nowrap;
  margin-right: 0;
  width: 0;
  overflow: hidden;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

.ctaCards .ctaCard__footer--hidden {
  position: relative;
}

.background--white {
  background-color: var(--white);
}

.flex-align {
  display: flex;
  align-items: center;
  justify-content: center;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<section >
  <div >
    <div >

      <div >
        <figure >

          <div >
            <span >Subheader</span>
          </div>

          <div >
            <div >
              <span >Learn more</span>
            </div>
            <div >
              <svg id="Group_397" data-name="Group 397" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
                <g id="Icon_ionic-ios-arrow-dropright" data-name="Icon ionic-ios-arrow-dropright">
                  <path id="Path_14" data-name="Path 14" d="M14.665,10.244a.823.823,0,0,1,1.2,0l4.2,4.44a.929.929,0,0,1,.026,1.234l-4.14,4.376a.82.82,0,0,1-1.2,0,.929.929,0,0,1,0-1.267l3.519-3.763-3.607-3.763A.919.919,0,0,1,14.665,10.244Z" transform="translate(-4.866 -2.77)" fill="#089f84" />
                  <path id="Path_15" data-name="Path 15" d="M3.375,15.875a12.5,12.5,0,1,0,12.5-12.5A12.5,12.5,0,0,0,3.375,15.875Zm1.923,0A10.573,10.573,0,0,1,23.351,8.4,10.573,10.573,0,1,1,8.4,23.351,10.486,10.486,0,0,1,5.3,15.875Z" transform="translate(-3.375 -3.375)" fill="#089f84" />
                </g>
              </svg>
            </div>
          </div>

        </figure>
      </div>

      <div >
        <figure >

          <div >
            <span >Subheader 2</span>
          </div>

          <div >
            <div >
              <span >Learn more</span>
            </div>
            <div >
              <svg id="Group_397" data-name="Group 397" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
                <g id="Icon_ionic-ios-arrow-dropright" data-name="Icon ionic-ios-arrow-dropright">
                  <path id="Path_14" data-name="Path 14" d="M14.665,10.244a.823.823,0,0,1,1.2,0l4.2,4.44a.929.929,0,0,1,.026,1.234l-4.14,4.376a.82.82,0,0,1-1.2,0,.929.929,0,0,1,0-1.267l3.519-3.763-3.607-3.763A.919.919,0,0,1,14.665,10.244Z" transform="translate(-4.866 -2.77)" fill="#089f84" />
                  <path id="Path_15" data-name="Path 15" d="M3.375,15.875a12.5,12.5,0,1,0,12.5-12.5A12.5,12.5,0,0,0,3.375,15.875Zm1.923,0A10.573,10.573,0,0,1,23.351,8.4,10.573,10.573,0,1,1,8.4,23.351,10.486,10.486,0,0,1,5.3,15.875Z" transform="translate(-3.375 -3.375)" fill="#089f84" />
                </g>
              </svg>
            </div>
          </div>

        </figure>
      </div>

    </div>
  </div>
</section>

CodePudding user response：

Instead of display:none please give white-space:nowrap; overflow:hidden;width:0; that shows hidden. Also

.ctaCards .ctaCard:hover .ctaCard__footer--hidden {
  width: auto;
  display: block;
}

instead give width has you need.

.ctaCards .ctaCard:hover .ctaCard__footer--hidden {
 width: 100px;
}

let us give animation to

.ctaCards .ctaCard:hover .ctaCard__footer-text {
   -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
}

Please check this

:root {
  --white: #FFFFFF;
  --black-2: #2C3645;
}

.ctaCards {
  background-color: #E7E6E0;
  padding: 100px 0;
}

.ctaCards .ctaCard {
  border-radius: 10px;
  box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.08);
  padding: 44px 43px 54px 43px;
  max-width: 340px;
  margin: 0 auto 60px auto;
  //display: flex;
  flex-direction: column;
  align-self: stretch;

}

.ctaCards .ctaCard:hover .ctaCard__footer svg path {
  fill: var(--black-2);
}

.ctaCards .ctaCard:hover .ctaCard__footer-text {
   -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;

}

.ctaCards .ctaCard:hover .ctaCard__footer--hidden {
 width: 100px;
  
}

.ctaCards .ctaCard__header {
  margin-bottom: 25px;
}

.ctaCards .ctaCard__body {
  flex: 1;
}

.ctaCards .ctaCard__footer {
  margin-top: 30px;
}

.ctaCards .ctaCard__footer-text {
  margin-right: 20px;
  width: 0;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

.ctaCards .ctaCard__footer--hidden {
        width:0%;
  
    white-space:nowrap;
    overflow:hidden;

  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

.ctaCards .ctaCard__footer--visible {
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

.background--white {
  background-color: var(--white);
}

.flex-align {
  display: flex;
  align-items: center;
  justify-content: center;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<section >
  <div >
    <div >

      <div >
        <figure >

          <div >
            <span >Subheader</span>
          </div>

          <div >
            <div >
              <span >Learn more</span>
            </div>
            <div >
              <svg id="Group_397" data-name="Group 397" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
                <g id="Icon_ionic-ios-arrow-dropright" data-name="Icon ionic-ios-arrow-dropright">
                  <path id="Path_14" data-name="Path 14" d="M14.665,10.244a.823.823,0,0,1,1.2,0l4.2,4.44a.929.929,0,0,1,.026,1.234l-4.14,4.376a.82.82,0,0,1-1.2,0,.929.929,0,0,1,0-1.267l3.519-3.763-3.607-3.763A.919.919,0,0,1,14.665,10.244Z" transform="translate(-4.866 -2.77)" fill="#089f84" />
                  <path id="Path_15" data-name="Path 15" d="M3.375,15.875a12.5,12.5,0,1,0,12.5-12.5A12.5,12.5,0,0,0,3.375,15.875Zm1.923,0A10.573,10.573,0,0,1,23.351,8.4,10.573,10.573,0,1,1,8.4,23.351,10.486,10.486,0,0,1,5.3,15.875Z" transform="translate(-3.375 -3.375)" fill="#089f84" />
                </g>
              </svg>
            </div>
          </div>

        </figure>
      </div>

      <div >
        <figure >

          <div >
            <span >Subheader 2</span>
          </div>

          <div >
            <div >
              <span >Learn more</span>
            </div>
            <div >
              <svg id="Group_397" data-name="Group 397" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
                <g id="Icon_ionic-ios-arrow-dropright" data-name="Icon ionic-ios-arrow-dropright">
                  <path id="Path_14" data-name="Path 14" d="M14.665,10.244a.823.823,0,0,1,1.2,0l4.2,4.44a.929.929,0,0,1,.026,1.234l-4.14,4.376a.82.82,0,0,1-1.2,0,.929.929,0,0,1,0-1.267l3.519-3.763-3.607-3.763A.919.919,0,0,1,14.665,10.244Z" transform="translate(-4.866 -2.77)" fill="#089f84" />
                  <path id="Path_15" data-name="Path 15" d="M3.375,15.875a12.5,12.5,0,1,0,12.5-12.5A12.5,12.5,0,0,0,3.375,15.875Zm1.923,0A10.573,10.573,0,0,1,23.351,8.4,10.573,10.573,0,1,1,8.4,23.351,10.486,10.486,0,0,1,5.3,15.875Z" transform="translate(-3.375 -3.375)" fill="#089f84" />
                </g>
              </svg>
            </div>
          </div>

        </figure>
      </div>

    </div>
  </div>
</section>

Page link：https//www.codepudding.com/Softwareengineering/384563.html

Prev:How to pass two arguments for a method in the HTML template?
Next:Detect a change in span content with javascript
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding