Text slide in on hover CSS

user_2067047 0
Viewed 1470

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>

slide hover css
1 Answers

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>

user_86203330
Related