使用精灵作为图像上的悬停背景

Question

第一次访问我创建的页面时，我注意到了大量的加载时间。我的目标是做一个＆＃34;遇见我们＆＃34;我妻子公司的页面，当用户将鼠标悬停在照片上时，会出现不同的照片+文字淡入。我终于弄明白了，我喜欢这种效果。列是响应式的，除了我第一次访问页面时，每次将鼠标悬停在图像上时，它都需要大约1秒钟才能加载。

我读了一篇关于精灵的文章，显然有助于加载时间。问题是，文章以特定的方式格式化html / css，与我格式化列的方式大不相同。我并不急于完全重新编写代码，所以我想知道是否有人可以向我解释如何使用我目前的代码实现sprite。

另外，我确信我的代码非常混乱，部分内容是多余的。我也很确定我可以压缩所有冗余部分，而不仅仅是100％。

以下是代码：

＆＃13;

＆＃13;

  .meetuscontainer {
  max-width: 1280px;
  margin: 0 auto;
  clear: both;
}

.meetusimg1 {
  margin: 10px;
  width: 350px;
  height: 525px;
  background-image: url("https://cdn.shopify.com/s/files/1/2185/4785/files/sLL_Proofs-141chelseaport.jpg?6924964667493824007");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.meetusimg2 {
  margin: 10px;
  width: 350px;
  height: 525px;
  background-image: url("https://cdn.shopify.com/s/files/1/2185/4785/files/sLL_Proofs-256heatherport.jpg?6924964667493824007");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.meetusimg3 {
  margin: 10px;
  width: 350px;
  height: 525px;
  background-image: url("https://cdn.shopify.com/s/files/1/2185/4785/files/SMLL_Proofs-312momport.jpg?6924964667493824007");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.meetusimg4 {
  margin: 10px;
  width: 350px;
  height: 525px;
  background-image: url("https://cdn.shopify.com/s/files/1/2185/4785/files/SMLL_Proofs-287magport.jpg?6924964667493824007");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.meetusimg5 {
  margin: 10px;
  width: 350px;
  height: 525px;
  background-image: url("https://cdn.shopify.com/s/files/1/2185/4785/files/LL_Proofs-120annieports.jpg?6924964667493824007");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.meetusimg6 {
  margin: 10px;
  width: 350px;
  height: 525px;
  background-image: url("https://cdn.shopify.com/s/files/1/2185/4785/files/LL_Proofs-055kimports.jpg?6924964667493824007");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.meetusimg7 {
  margin: 10px;
  width: 350px;
  height: 525px;
  background-image: url("https://cdn.shopify.com/s/files/1/2185/4785/files/sLL_Proofs-257connorport.jpg?6924964667493824007");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.meetusimg8 {
  margin: 10px;
  width: 350px;
  height: 525px;
  background-image: url("https://cdn.shopify.com/s/files/1/2185/4785/files/LL_Proofs-088danielleports.jpg?6924964667493824007");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.meetusimgtext {
  opacity: 0;
  width: 350px;
  text-align: center;
  font-weight: 600;
  font-size: 29px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 350px;
  color: #fff;
  font-family: "Poppins", sans-serif;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

.meetusimgtext2 {
  opacity: 0;
  width: 350px;
  font-weight: 400;
  text-align: center;
  font-size: 22px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 8px;
  color: #a1ffd2;
  font-family: "Pacifico", sans-serif;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}


/* Gallery */

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

.meetusimg1:hover {
  background-image: url("https://cdn.shopify.com/s/files/1/2185/4785/files/sLL_Proofs-141chelseaport2.jpg?6924964667493824007");
}

.meetusimg2:hover {
  background-image: url("https://cdn.shopify.com/s/files/1/2185/4785/files/sLL_Proofs-268heatherport.jpg?6924964667493824007");
}

.meetusimg3:hover {
  background-image: url("https://cdn.shopify.com/s/files/1/2185/4785/files/LL_Proofs-014momports.jpg?6924964667493824007");
}

.meetusimg4:hover {
  background-image: url("https://cdn.shopify.com/s/files/1/2185/4785/files/SLL_Proofs-403magport.jpg?6924964667493824007");
}

.meetusimg5:hover {
  background-image: url("https://cdn.shopify.com/s/files/1/2185/4785/files/sLL_Proofs-111annieport.jpg?6924964667493824007");
}

.meetusimg6:hover {
  background-image: url("https://cdn.shopify.com/s/files/1/2185/4785/files/LL_Proofs-048kimports.jpg?6924964667493824007");
}

.meetusimg7:hover {
  background-image: url("https://cdn.shopify.com/s/files/1/2185/4785/files/amLL_Proofs-271connorport.jpg?6924964667493824007");
}

.meetusimg8:hover {
  background-image: url("https://cdn.shopify.com/s/files/1/2185/4785/files/SLL_Proofs-500daniellepor2t.jpg?6924964667493824007");
}

.meetusimg1:hover .meetusimgtext {
  -webkit-transition: opacity 0.6s ease-in;
  -moz-transition: opacity 0.6s ease-in;
  -o-transition: opacity 0.6s ease-in;
  opacity: 1;
}

.meetusimg1:hover .meetusimgtext2 {
  -webkit-transition: opacity 0.6s ease-in;
  -moz-transition: opacity 0.6s ease-in;
  -o-transition: opacity 0.6s ease-in;
  opacity: 1;
}

.meetusimg2:hover .meetusimgtext {
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  opacity: 1;
}

.meetusimg2:hover .meetusimgtext2 {
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  opacity: 1;
}

.meetusimg3:hover .meetusimgtext {
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  opacity: 1;
}

.meetusimg3:hover .meetusimgtext2 {
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  opacity: 1;
}

.meetusimg4:hover .meetusimgtext {
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  opacity: 1;
}

.meetusimg4:hover .meetusimgtext2 {
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  opacity: 1;
}

.meetusimg5:hover .meetusimgtext {
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  opacity: 1;
}

.meetusimg5:hover .meetusimgtext2 {
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  opacity: 1;
}

.meetusimg6:hover .meetusimgtext {
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  opacity: 1;
}

.meetusimg6:hover .meetusimgtext2 {
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  opacity: 1;
}

.meetusimg7:hover .meetusimgtext {
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  opacity: 1;
}

.meetusimg7:hover .meetusimgtext2 {
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  opacity: 1;
}

.meetusimg8:hover .meetusimgtext {
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  opacity: 1;
}

.meetusimg8:hover .meetusimgtext2 {
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  opacity: 1;
}

.meetusimg9:hover .meetusimgtext {
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  opacity: 1;
}

.meetusimg9:hover .meetusimgtext2 {
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  opacity: 1;
}

@media only screen and (min-width: 320px) and (max-width: 480px) {
  .meetusimg1,
  .meetusimg2,
  .meetusimg3,
  .meetusimg4,
  .meetusimg5,
  .meetusimg6,
  .meetusimg7,
  .meetusimg8,
  .meetusimg9,
  .meetusimgtext,
  .meetusimgtext2 {
    max-width: 280px;
  }

＆＃13;

<div class="meetuscontainer">
  <div class="gallery">
    <figure class="meetusimg1">
      <div class="meetusimgtext">CHELSEA EARLY</div>
      <div class="meetusimgtext2">Founder + Designer</div>
    </figure>
    <figure class="meetusimg2">
      <div class="meetusimgtext">HEATHER WALKER</div>
      <div class="meetusimgtext2">Founder + Designer</div>
    </figure>
    <figure class="meetusimg3">
      <div class="meetusimgtext">KAREN SAARI</div>
      <div class="meetusimgtext2">Founder + Administrator</div>
    </figure>
  </div>
</div>
<div class="clearfix"></div>
<div class="meetuscontainer">
  <div class="gallery">
    <figure class="meetusimg4">
      <div class="meetusimgtext">MAGGIE HABROS</div>
      <div class="meetusimgtext2">Cutter</div>
    </figure>
    <figure class="meetusimg5">
      <div class="meetusimgtext">ANNIE MIHULKA</div>
      <div class="meetusimgtext2">Serger</div>
    </figure>
    <figure class="meetusimg6">
      <div class="meetusimgtext">KIM THEISEN</div>
      <div class="meetusimgtext2">Cutter</div>
    </figure>
  </div>
</div>
<div class="clearfix"></div>
<div class="meetuscontainer">
  <div class="gallery">
    <figure class="meetusimg7">
      <div class="meetusimgtext">CONNOR JONES</div>
      <div class="meetusimgtext2">Top Stitcher</div>
    </figure>
    <figure class="meetusimg8">
      <div class="meetusimgtext">DANIELLE PFANNENSTIEL</div>
      <div class="meetusimgtext2">Elastics</div>
    </figure>
    <!--<figure class="meetusimg9">
<div class="meetusimgtext">STEPHANIE TRAWICK</div>
<div class="meetusimgtext2">Cutter</div>
</figure>-->
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

编辑：包括过渡

.meetusimg1 {
  margin: 10px;
  width: 350px;
  height: 525px;
  background-image: url("https://i.stack.imgur.com/54AbA.jpg");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  transition:background-position 1s ease;
}

.meetusimg1:hover {
  background-position: -350px 0;
}

<figure class="meetusimg1">
  <div class="meetusimgtext">CHELSEA EARLY</div>
  <div class="meetusimgtext2">Founder + Designer</div>
</figure>

Answer 2

谢谢你们所有答案。我继续根据你所说的一切来修改我的代码。我认为它看起来更好。唯一的问题是我在h2和P之间有一个奇怪的填充量，我没有告诉css放在那里。我在工作人员文本p上将填充和边距更改为0px，这似乎有帮助

/* Container */
.staff-container { 
  max-width: 1280px;
  margin: 0 auto; 
  clear: both; 
}

/* Gallery */
.staff-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

/* All Staff Image Styling */
.staff-img {
  margin: 10px;
  width: 350px;
  height: 525px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
}

/* All Staff Text Styling */
.staff-text {
  opacity: 0;
  width: 350px;
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
  color: #fff;
  text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}

.staff-text h2{
  padding-top: 275px;
  font-family: "Poppins", sans-serif;
  font-size: 27px;
  text-transform: uppercase;
}

.staff-text p{
  font-family: "Pacifico", sans-serif;
  font-size: 22px;
}

.staff-img:hover .staff-text {
 -webkit-transition: opacity 0.6s ease-in;
 -moz-transition: opacity 0.6s ease-in;
 -o-transition: opacity 0.6s ease-in;
  opacity: 1;
}

/* Img Hover */
.staff-img:hover {
 background-position: -350px 0;
}

.chelsea {
 background-image: url("https://cdn.shopify.com/s/files/1/2185/4785/files/1-ChelseaSprite_f89345e7-ea1e-4186-af48-d8a957b0d8b5.jpg?5470095217541866382"); 
}

<div class="staff-container">
  <div class="staff-gallery">
   <div class="staff-img chelsea">
    <div class="staff-text">
      <h2>Chelsea Early</h2>
      <p>Founder + Designer</p>
    </div>
   </div>
     <div class="staff-img chelsea">
    <div class="staff-text">
      <h2>Chelsea Early</h2>
      <p>Founder + Designer</p>
    </div>
   </div>
     <div class="staff-img chelsea">
    <div class="staff-text">
      <h2>Chelsea Early</h2>
      <p>Founder + Designer</p>
    </div>
   </div>
  </div>
</div>