Using sprites as hover backgrounds on images - html

Question

I am noticing a pretty hefty amount of loading time on the first visit to a page I created. My goal was to make a "meet us" page for my wife's company where when the user hovers over a photo, a different photo + text fade in appears. I finally figured this out and I love the the effect. The columns are responsive and I have no issues other than the fact that when I first visit the page, each time I hover over an image it's taking around 1 full second to load.
I read an article about sprites, which apparently help loading times. The problem is, the article formats html/css in a specific way, much different than the way I formatted my columns. I am not eager to completely re-work my code so I was wondering if someone could explain to me how to implement sprites with the code I currently have.
Also, I am sure my code is super messy and parts of it are redundant. I'm also pretty sure I could condense all of the redundant parts I'm just not 100% on how.
Here is the code:
.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;
}
<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>

Answer 1

EDIT: Including transition
.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

Thank you guys for all the answers. I went ahead and revised my code based off of everything you said. I think it looks a TON better. Only issue I'm having is that between h2 and P there is a strange amount of padding that I didn't tell the css to put there. I changed the padding and margin to 0px on the staff-text p and that seemed to help
/* 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>