JSFiddle - React, Tailwind, and code Playground

HTML

<div id="containing-outbox">

            <span class="toggle-image"></span>

        <div id="product-specs">
        
            <ol id="bullet-specs">
                <li><span class="order">A.</span><span class="step">Fine stainless steel mesh filters out leaves, pine needles, seed pods and roof sand grit.</span></li>
                <li><span class="order">B.</span><span class="step">Gutterglove installs on a variety or roof types.</span></li>
                <li><span class="order">C.</span><span class="step">Anodized aluminum frame supports the mesh and channels rain water to the gutter.</span></li>
                <li><span class="order">D.</span><span class="step">Gutterglove installs on your existing gutters.</span></li>
            </ol><!-- #bullet-specs -->
            
            
            <ol id="bullet-specs-toggle">
            <li><span class="order">A.</span>Leaves, pine needles and roof sand grit roll off your gutter and to the ground.</li>
            <li><span class="order">B.</span>Nothing but rainwater filters through to your gutter.</li>
            <li><span class="order">C.</span>Thickest and most durable support frame of any gutter guard.</li>
            <li><span class="order">D.</span>Filters over 150 inches of hourly rain-fall.</li>
            </ol><!-- #bullet-specs -->
        
        </div><!-- #product-specs -->

</div><!-- #containing-outbox -->

<h2>Awesome that nothing but rain water enters the gutters and exits through the bottom.</h2>

CSS

h2 { font-size: 34px; 
    margin-left: 50px;}

#containing-outbox { margin: 0; width: 300px; padding: 15px 20px 20px; border-top: 0px #ccc solid; transition:.2s; -webkit-transition-duration:.2s; -moz-transition-duration:.2s; -o-transition:.2s; }
ol#bullet-specs { display: block;}
ol#bullet-specs-toggle { display: none; }
ol#bullet-specs li span.order, ol#bullet-specs-toggle li span.order { padding: 0px 5px 0 0; float: left; }
ol#bullet-specs li, ol#bullet-specs-toggle li { font-size: 12px; line-height: 16px; padding: 5px 10px 5px 0; margin-left: 0px; list-style: none; color: #555; }
ol li .step { display: block; }
.space { padding: 10px 0; }
.toggle-image { width: 264px; height: 340px; overflow: hidden; background: #333 url(images/product_model_demo_img.jpg) no-repeat; display: block; transition:.3s; -webkit-transition-duration:.3s; -moz-transition-duration:.3s; -o-transition:.3s; }
#containing-outbox:hover h3 { display: none; }
#containing-outbox:hover .toggle-image { background: url(images/product_model_demo_img.jpg) 0 -340px no-repeat; }
#containing-outbox:hover ol#bullet-specs { display: none; }
#containing-outbox:hover ol#bullet-specs-toggle  { display: block; }