Hover Effect Feature Row

This feature row highlights the three main service priorities of Texas A&M Health. The text, images, and graphics were all previously used in print marketing materials, and I wanted to build a component that combined all of the elements in an interactive way.

I wrote the HTML for small screens first, originally using the images rather than graphics. Once the graphics were finalized for web, I combined the two to create the medium screen layout, and finally incorporated a Bootstrap hover effect for the interactive version on large screens.

This component was repackaged throughout the Texas A&M Health site and the college sites, both with and without the graphic elements.

Design

Screenshot of the Priorities section of the redesigned Texas A&M Health website

Code


    <section id="priorities" class="d-flex pb-10 parallax-container">
      <div class="container">
          <div class="row text-center mb-4">
            <div class="col">
                <h2 class="section-heading mb-4">Our priorities</h2>
                <p>Founded by the Morrill Act of 1862, Texas A&M University was created to serve. Today, we lead the way for health care in the 21st century. We have identified three priority areas that honor our land-grant roots and keep service <span class="text-nowrap">at the core of our mission.</span>
                </p>
            </div>
          </div>
          <div id="priorities-text" class="d-block d-md-none">
            <div id="hp-priorities-text" class="row text-center d-flex justify-content-center">
              <div class="col-11">
                <img class="priorities-icons" src="../images/graphics/rural-g.svg"
                  alt="shape of texas with a heart in the middle" />
                <h3 class="mt-3">Rural population health</h3>
                <p>We’re bringing health care where it’s needed most. Through our keen focus on rural populations and innovative care delivery, we’re eliminating health disparities throughout Texas.</p>
              </div>
              <div class="col-11">
                <img class="priorities-icons" src="../images/graphics/military-g.svg"
                  alt="dog tags with a medical symbol on them" />
                <h3 class="mt-3">Military health</h3>
                <p>We honor Texas A&M University’s rich military legacy. Through our unique relationship with the military academies and veteran populations, we’re improving the lives of military members and their families.</p>
              </div>
              <div class="col-11">
                <img class="priorities-icons" src="../images/graphics/engineering-g.svg" alt="gears" />
                <h3 class="mt-3">Innovation through engineering</h3>
                <p>We make the impossible, possible—by creating systems and technologies that address health care’s greatest challenges, and bringing together the brightest minds in health care and engineering.</p>
              </div>
          </div>
        </div>
        <div id="priorities-img" class="d-none d-md-block">
          <div id="hp-priorities" class="row text-center d-flex justify-content-center">
            <div class="col-lg-4">
              <div class="hovereffect height-auto" tabindex="0">
                <img class="img-fluid priorities-img" src="../images/include/rural-002.jpg"
                  alt="mailbox painted with a Texas flag" />
                  <a class="overlay-dark d-flex flex-column align-items-center">
                    <img class="priorities-icons" src="../images/graphics/texas-small-min.svg" alt="shape of texas with a heart in the middle" />
                    <p>We’re bringing health care where it’s needed most. Through our keen focus on rural populations and innovative care delivery, we’re eliminating health disparities throughout Texas.</p>
                  </a>
                </div>
              <h3 class="mt-3">Rural population health</h3>
            </div>
            <div class="col-lg-4">
              <div class="hovereffect height-auto" tabindex="0">
                <img class="img-fluid priorities-img" src="../images/include/military-002.jpg" alt="soldier medical student learning on simulated patient" />
                  <a class="overlay-dark d-flex flex-column align-items-center">
                    <img class="priorities-icons" src="../images/graphics/dog-tags-min.svg" alt="dog tags with a medical symbol on them" />
                    <p>We honor Texas A&M University’s rich military legacy. Through our unique relationship with the military academies and veteran populations, we’re improving the lives of military members and their families.</p>
                  </a>
                </div>
              <h3 class="mt-3">Military health</h3>
            </div>
            <div class="col-lg-4">
              <div class="hovereffect height-auto" tabindex="0">
                <img class="img-fluid priorities-img" src="../images/include/enmed-005.jpg" alt="Three Engineering Medicine students working on electrical equipment" />
                  <a class="overlay-dark d-flex flex-column align-items-center">
                    <img class="priorities-icons" src="../images/graphics/gears-heartbeat-min.svg" alt="gears" />
                    <p>We make the impossible, possible—by creating systems and technologies that address health care’s greatest challenges, and bringing together the brightest minds in health care and engineering.</p>
                  </a>
                </div>
              <h3 class="mt-3">Innovation through engineering</h3>
            </div>
          </div>
        </div>
      </div>
    </section>