CodePen

HTML

            
              <div class="wrapper">
  <a href="#" class="moreInfo">Click for more info </a>
  <div class="originalText">ORIGINAL TEXT
    <div class="newText">NEW TEXT</div>
  </div>
</div>
            
          
!
via HTML Inspector

CSS

            
              .originalText {
  margin: 30px 0;
  background: red;
  width: 300px;
  height: 200px;
  position: relative
}

.newText {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: black;
  color: white;
  display: none;
}
.show .newText {
  display: block;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              function active() {
  $('.originalText').addClass('show');
}

function normal() {
  $('.originalText').removeClass('show');
}

$('.originalText').hover(active, normal);

$('.moreInfo').click(active);
$('.moreInfo').hover(function() {}, normal);

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................