Show element where another was without display: none - html

Question

I need an element to appear where another was, let's say on hover for the sake of an example. And I need to use CSS animations to make its transition smoother. So I can't use display property. And instead, I have to use this, right?
div {
visibility: hidden;
opacity: 0;
}
But my elements need to overlap, as in where one was, the other has to show instead. With display, that was pretty easy, but with this, I have no clue how to do this without making it too messy.
Can someone help me out? Here's the basic outline of my code:
.first-outline .first:hover {
visibility: hidden;
opacity: 0;
}
.first-outline .second {
visibility: hidden;
opacity: 0;
}
.first-outline:hover second {
visibility: initial;
opacity: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<li class="list-group-item first-outline">
<p class="first">First</p>
<p class="second">Second</p>
</li>
<!-- Or something like this, but it still doesn't work -->
<li class="list-group-item second-outline">
<span class="first">First</span>
<span class="second">Second</span>
</li>
Thank you.

Answer 1

Give the container a positon: relative and the inner divs positin: absolute then play with the hover states and opacity.
add transition property for smooth effect
.first-outline {
position:relative;
}
.first-outline .first, .first-outline .second {
position: absolute;
top: 0 ;
left: 0;
width: 100%;
height: 100%;
transition: opacity 500ms linear;
-webkit-transition: opacity 500ms linear;
-moz-transition: opacity 500ms linear;
}
.first-outline:hover .first, .first-outline .second {
opacity: 0;
}
.first-outline:hover .second {
opacity: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<li class="list-group-item first-outline">
<p class="first">First</p>
<p class="second">Second</p>
</li>