CODEWITHSUNDEEP
csshoverslide
amars
amars

Reputation: 407

Text slide in on hover CSS

I want the text Along came to slide in when mouse hovers over the wolf. But the position of the wolf should not change. Along came should simply slide in and fade in from the left to complete the sentence.

.main {
  width: 100vw;
  text-align:center;
}

.addText {
  display: none;
  color: rgba(255,255,255,0);
  transition: .5s;
}

.link:hover .addText {
  display: inline;
  color: red;
  transform: translate(-10px, 00%);
}
<div class="main">
  <div class="link">
      <span class="addText">Along came </span>
      the wolf
  </div>
</div>

Upvotes: 4

Views: 5103

Answers (1)

Temani Afif
Temani Afif

Reputation: 272965

Here is an idea where you can make the element width:0 so it doesn't affect the other element:

.main {
  text-align:center;
}
.link {
  display:inline-block; 
}
.addText {
  display:inline-block; /* inline-block so we can set a width */
  width:0;
  white-space:nowrap; /* keep text one line */
  direction:rtl; /* change direction so the text overflow on the left */
  color: rgba(255,255,255,0);
  transition: .5s;
  transform: translateX(20px); /* put the value you want here */
  pointer-events:none; /* to avoid the hover on the text, remove to see the difference */
}

.link:hover .addText {
  color: red;
  transform: translateX(0);
}
<div class="main">
  <div class="link">
      <span class="addText">Along came </span>
      the wolf
  </div>
</div>

You can also do only the translation in case you want the text to take the space:

.main {
  text-align:center;
}
.link {
  display:inline-block; 
}
.addText {
  display:inline-block; 
  color: rgba(255,255,255,0);
  transition: .5s;
  transform: translateX(100%);
}

.link:hover .addText {
  color: red;
  transform: translateX(0);
}
<div class="main">
  <div class="link">
      <span class="addText">Along came </span>
      the wolf
  </div>
</div>

Upvotes: 8

Related Questions