css / html text on text mouseover shortcode wrap

[typo_78]

On a WPress page filled with a text block, wanted to have another text block on mouseover in the same place with different message. The problem is that in the same time, I am trying to wrap a shortcode (slabtext plugin).

Is there any possibility to achieve this effect using CSS/ HTML ? I know that this can be possible using images but I am interested to have more control to the font type and to have better display quality.

thank you,

LE: Based on below received details and this code
http://codepen.io/reecegeorge/pen/sdeah
I am trying to wrap the shortcode like this :

<div class="parent">
<h1 id="h1">[slabtext]
[slab]Fit text[/slab]
[slab]Typography[/slab]
[slab]Made easy[/slab]
[slab]use a WordPress shortcode[/slab]
[/slabtext]</h1>
<div class="child">
<h1 id="h1">[slabtext]
[slab]hover two[/slab]
[slab]Typography[/slab]
[slab]Made easy[/slab]
[slab]look mom no hands[/slab]
[/slabtext]</h1>
</div>
</div>

css:

h1
            {
            text-align:left;
            font-family:'LeagueGothicRegular', "Impact", Charcoal, Arial Black, Gadget, Sans serif;
            text-transform: uppercase;
            line-height:1;
            color:#222;
            font-size:300%;
            /* Remember to set the correct font weight if using fontface */
            font-weight:normal;
            }
        /* Smaller font-size for the side-by-side demo */
        .col-1 h1,
        .col-2 h1
            {
            font-size: 32px;
            }


* {
  margin: 0;
  padding: 0;
}
.parent {
  border: 1px solid grey;
  width: 100%;
  margin: 25px auto;
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: none;
}
.parent:hover .child {
  display: block;
}
p {
  padding: 1em;
}

The result is pretty strange and not so sure how can I receive the same effect on child hover too (slabtext fit on the window).The result :

hover 1 ( http://i.imgur.com/K3uZlJb.jpg )

hover 2 ( http://i.imgur.com/F5bkukZ.jpg )

Thank you,

[typo_78]

LE: the solution came after I’ve made these changes in the css :

...
.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: block;
}
.parent:hover .child {
  display: none;
}
...

[Author]

Posts