JSFiddle - React, Tailwind, and code Playground

by mjgasner

HTML

<div id="containing-outbox">

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

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

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

CSS

#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, ol#bullet-specs-toggle { list-style: upper-alpha; }
ol#bullet-specs li, ol#bullet-specs-toggle li { font-size: 12px; line-height: 16px; padding: 5px 10px 5px 5px; margin-left: 20px; list-style: upper-alpha; color: #555; }
.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: #ccc url(images/product_model_demo_img.jpg) 0 -340px no-repeat; }
#containing-outbox:hover ol#bullet-specs { display: none; list-style: upper-alpha; }
#containing-outbox:hover ol#bullet-specs-toggle  { display: block; list-style: upper-alpha; }