Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: Replacing a text on hover, but smooth transition to the new text does not work?

The scenario:

If a user hovers over a text (e.g. an h1-tag), it should change to a new text. The new text should appear smoothly.

What I've done so far:

I was able to replace a text with a new one with the "display:none" and the "content: 'This is the new text' "-property. My problem is that the new text does not appear smoothly (it does not fade in/transitions). I've also tried to use opacity, but it doesn't replace my old text (instead it just disappears and the new text appears next to it).

Here is a JSFiddle and code snippet:

.my_div {
  background-color: red;
}
.my_div:hover {
  background-color: green;
  transition: all 500ms ease-in-out;
}
.my_div:hover .title span {
  display: none;
}
.my_div:hover .title:after {
  content: "A wild text appears";
}
<div class="my_div">
  <h1 class="title"><span>This is the old text</span></h1>
</div>
like image 411
OhDaeSu Avatar asked Oct 10 '15 18:10

OhDaeSu


People also ask

How do you transition smoothly in CSS?

The transition-timing-function property can have the following values: ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default) linear - specifies a transition effect with the same speed from start to end. ease-in - specifies a transition effect with a slow start.

Is CSS transition only for hover?

But transitions are not just limited to use with :hover . You can animate CSS properties, thus use CSS transitions without hover. This is done via transitions using some other CSS techniques, a number of which I've outlined below. I've also included a demo for each example.

How do you trigger transitions in CSS?

Triggering transitions You can trigger CSS transitions directly with pseudo classes like :hover (activates when the mouse goes over an element), :focus (activates when a user tabs onto an element, or when a user clicks into an input element), or :active (activates when user clicks on the element).


Video Answer


3 Answers

Here is a really simple sample

(This hidden snippet use pseudo elements instead of the visible's inner div's)

div, div:after, div:before {
    height: 100px;
    width: 100px;
    position: absolute;
    font-size: 40px;
    color: black
}

div:after {
    content: "New";
    opacity: 0;
}
div:before {
    content: "Old";
    opacity: 1;
}

div:after, div:before {
    transition: opacity 0.5s linear;
}

.wrap:hover:before {
    opacity: 0;
}
.wrap:hover:after {
    opacity: 1;
}
<div class="wrap">
</div>

div {
    height: 100px;
    width: 100px;
    position: absolute;
    font-size: 40px;
    color: black
}

.new {
    opacity: 0;
}

.old, .new {
    transition: opacity 0.5s linear;
}

.wrap:hover .old {
    opacity: 0;
}
.wrap:hover .new {
    opacity: 1;
}
<div class="wrap">
<div class="new">New</div>
<div class="old">Old</div>
</div>
like image 84
Asons Avatar answered Nov 15 '22 23:11

Asons


OK, so first part, you cannot animate the display property, you need a work-around. To do this we fall back to what we can animate, opacity and width/height

For what you are trying to accomplish, I'd use two spans inside the <h1> - one with each text version. Since spans are inline elements we give them display: block so we can control there dimensions more cleanly.

.my_div {
  background-color: red;
  transition: all 500ms ease-in-out;
}
.my_div:hover {
  background-color: green;
}
h1 {
  overflow: hidden;
}
.old-text,
.new-text {
  display: block;
  overflow: hidden;
  transition: all 500ms ease-in-out;
}
.old-text {
  height: auto;
  opacity: 1;
  width: auto;
}
.new-text {
  color: #fff;
  height: 0;
  opacity: 0;
  width: 0;
}
.my_div:hover .old-text {
  height: 0px;
  opacity: 0;
  width: 0px;
}
.my_div:hover .new-text {
  height: auto;
  opacity: 1;
  width: auto;
}
<div class="my_div">
  <h1 class="title">
        <span class="old-text">This is the old text</span>
        <span class="new-text">A wild text appears!</span>
     </h1>
</div>
like image 26
Camwyn Avatar answered Nov 16 '22 00:11

Camwyn


The question has already been answered, but I think the best approach would be to use a pseudo element. It's very simple and clean. BUT: you lose the transition effect.

.MySpecialTag:before
{
    content: "The old text";
}
.MySpecialTag:hover:before
{
    content: "The new text";
}
<h1 class="MySpecialTag"></h1>
like image 32
avrahamcool Avatar answered Nov 16 '22 00:11

avrahamcool