Firefox中只显示一些图像

Question

我遇到一个奇怪的问题，某些图像没有在Firefox中显示，而是在所有其他浏览器中显示。

You can see the differences between Chrome and Firefox here

我使用无序列表来显示列表项的一行图像。但是，在每行的开头，我将正常图像放在未标记为列表项的列表中。 这在Chrome，Edge，IE和Safari中完美运行，但由于某些原因，只有少数图片无法在Firefox中显示。令人困惑的是，第一行没有任何根本不同与第三和第四行相比，有两个 - 无论如何我都看到了。

它还会在第三行和第四行中压缩图像，而我在其他浏览器中没有出现此问题。

我能看到的唯一区别是图片网址。我尝试删除禁用分隔符，看看是否有所作为，但它没有。

我创建了JS Fiddle来复制问题。

下面列出的是使用该链接可以找到的大大减少的版本。

  hr {
  opacity: .5;
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 80px;
  margin-right: 100px;
  border-style: inset;
  background: #00adbd;
  border-top: 0.5px dotted #fff;
}

.disabledbutton {
  pointer-events: none;
  opacity: 0.4;
}

#outeroutside {
  background-image: url("/assets/tile.jpg");
  background-color: #a00f14;
  width: 1300px;
  max-width: 100%;
  padding: 10px 10px 10px 10px;
  position: relative;
}

#outside {
  text-align: center;
  background-color: rgba(252, 251, 245, 0.95);
  width: 1200px;
  max-width: 100%;
  padding: 0px 10px 0px 0px;
}

#welcomemain p {
  width: 95%;
  display: inline-block;
  text-align: center;
  margin: 15px 5px;
  height: auto;
}

#welcomemain img {
  padding: 10px;
  max-width: 100%;
}

h2 {
  color: #2e1f11;
}

#outeroutside a:link {
  color: #996515;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
}

#outeroutside a:hover {
  color: #FFD700;
  opacity: 0.9;
}

#outeroutside a:visited {
  text-decoration: underline;
  color: #996515;
}

#outeroutside a:active {
  opacity: 0.5;
}

.row2 a {
  color: #C0C0C0 !important;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
}

.row2 a:visited {
  text-decoration: underline;
  color: #999999;
}

.row2 a:active {
  opacity: 0.5;
}

#navigation img {
  padding: 10px;
  max-width: 30%;
}

.youtube {
  position: relative;
  padding-bottom: 60%; // This is the aspect ratio
  height: 0;
  overflow: hidden;
}

.youtube iframe {
  padding: 10px 10px 10px 30px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

b {
  color: #312112;
}

i {
  color: #b05830;
}

.font {
  font-size: 15px;
}

.ih-item.circle.effect1 .spinner {
  width: 270px;
  height: 270px;
  border: 10px groove #fdec6d;
  border-right-color: #739968;
  border-bottom-color: #739968;
  border-radius: 50%;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

.ih-item.circle.effect1 .img {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: auto;
  height: auto;
}

.ih-item.circle.effect1 .img:before {
  display: none;
}

.ih-item.circle.effect1.colored .info {
  background: #1a4a72;
  background: rgba(26, 74, 114, 0.6);
}

.ih-item.circle.effect1 .info {
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: #333333;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

.ih-item.circle.effect1 .info h3 {
  color: #fff;
  text-transform: uppercase;
  position: relative;
  letter-spacing: 2px;
  font-size: 22px;
  margin: 0 30px;
  padding: 55px 0 0 0;
  height: 110px;
  text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ih-item.circle.effect1 .info p {
  color: #bbb;
  padding: 10px 5px;
  font-style: italic;
  margin: 0 30px;
  font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.ih-item.circle.effect1 a:hover .spinner {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.ih-item.circle.effect1 a:hover .info {
  opacity: 1;
}

.ih-item {
  position: relative;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

.ih-item,
.ih-item * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.ih-item a {
  color: #333;
}

.ih-item a:hover {
  text-decoration: none;
}

.ih-item img {
  width: 100%;
  height: 100%;
}

.ih-item.circle {
  position: relative;
  width: 270px;
  height: 270px;
  border-radius: 50%;
}

.ih-item.circle .img {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 50%;
}

.ih-item.circle .img:before {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

.ih-item.circle .img img {
  border-radius: 50%;
}

.ih-item.circle .info {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ih-item.circle.effect1 .spinner {
  width: 270px;
  height: 270px;
  border: 10px solid #ecab18;
  border-right-color: #1ad280;
  border-bottom-color: #1ad280;
  border-radius: 50%;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

.ih-item.circle.effect1 .img {
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 0px;
  right: 0;
  width: auto;
  height: auto;
}

.ih-item.circle.effect1 .img:before {
  display: none;
}

.ih-item.circle.effect1.colored .info {
  background: #1a4a72;
  background: rgba(26, 74, 114, 0.6)
}

.ih-item.circle.effect1 .info {
  top: 0px;
  bottom: 0;
  left: 0px;
  right: 0;
  background: #333;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

.ih-item.circle.effect1 .info h3 {
  color: #fff;
  text-transform: uppercase;
  position: relative;
  letter-spacing: 2px;
  font-size: 20px;
  margin: 0 30px;
  padding: 55px 0 0 0;
  height: 110px;
  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ih-item.circle.effect1 .info p {
  color: #bbb;
  padding: 11px 5px;
  font-style: italic;
  margin: 0 30px;
  font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.ih-item.circle.effect1 a:hover .spinner {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.ih-item.circle.effect1 a:hover .info {
  opacity: 1;
}

.row {
  margin: 5px 0px 10px 5px;
  padding: 10px 3px 30px 3px;
  width: 1115px;
  max-width: 100%;
  display: flex;
  flex-wrap: nonwrap;
  align-content: center;
  overflow-y: hidden;
  overflow-x: auto;
  background-color: rgba(238, 155, 195, 0.95);
}

.row2 {
  margin: 5px 0px 5px 5px;
  padding: 10px 3px 15px 3px;
  width: 1115px;
  max-width: 100%;
  display: flex;
  flex-wrap: nonwrap;
  align-content: center;
  overflow-y: hidden;
  overflow-x: auto;
  background-color: rgba(238, 46, 54, 0.95);
}

.col-sm-6 li {
  padding: 10px 20px 10px 20px;
  max-width: 33.3%;
}

a.effect-shine:hover {
  -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .6) 30%, #000 50%, rgba(0, 0, 0, .6) 70%);
  -webkit-mask-size: 200%;
  animation: shine 2s infinite;
}

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }
  to {
    -webkit-mask-position: -50%;
  }

    <ul id="week1">
            <ul class="row">

              <img src="http://springfieldleather.com/assets/Scroll_Week1.1.png">




              <li class="col-sm-6">

                <!-- normal -->
                <div class="ih-item circle effect1">
                  <a href="#">
                    <div class="spinner"></div>
                    <div class="img"><img src="http://springfieldleather.com/assets/Week1_Gator_Buckles.jpg" alt="img"></div>
                    <div class="info">
                      <div class="info-back">
                        <h3>$5 Gator Buckle Sets</h3>
                        <p>Get a selection of 6-piece gator buckle sets for just $5. These opulent adornments are jewel encrusted and waiting to make your belt fancy!</p>
                      </div>
                    </div>
                  </a>
                  <P> <a href="/5-gator-buckle-sets" class="effect-shine">Click here to see all styles! </a></p>
              </li>
              <li class="col-sm-6">

                <!-- normal -->
                <div class="ih-item circle effect1">
                  <a href="#">
                    <div class="spinner"></div>
                    <div class="img"><img src="http://springfieldleather.com/assets/Week1_Liz_CraftPack.jpg" alt="img"></div>
                    <div class="info">
                      <div class="info-back">
                        <h3>Liz's Craft Pack</h3>
                        <p>Explore the possibilities of leather craft with Liz's craft pack. Bursting at the seams with leather components, this not-so-little pack is only $25!</p>
                      </div>
                    </div>
                  </a>

                  <P> <a href="/Lizs-Craft-Pack" class="effect-shine">Get Liz's Craft Pack Here!</a></p>
              </li>
              <li class="col-sm-6">

                <!-- normal -->
                <div class="ih-item circle effect1">
                  <a href="#">
                    <div class="spinner"></div>
                    <div class="img"><img src="http://springfieldleather.com/assets/Week1_Stamping_Tools.jpg" alt="img"></div>
                    <div class="info">
                      <div class="info-back">
                        <h3>25% Off Stamping Tools</h3>
                        <p>Transform your veg tan with stamping tools! For this month only, get select stamping tools at an even lower price! Nearly 100 tools are included!</p>
                      </div>
                    </div>
                  </a>
                  <P> <a href="/tools/Tools-Specials-Closeouts-Deals/SALE-Stamping-Tools" class="effect-shine">Click here to view the selection!</a></p>
              </li>

              <li class="col-sm-6">

                <!-- normal -->
                <div class="ih-item circle effect1">
                  <a href="#">
                    <div class="spinner"></div>
                    <div class="img"><img src="http://springfieldleather.com/assets/Week1_BeltBend_Black.jpg" alt="img"></div>
                    <div class="info">
                      <div class="info-back">
                        <h3>Black Belt Bends</h3>
                        <p>These Hermann Oak drum dyed belt bends are magnificent and they're on sale! Get them in black or brown. </p>
                      </div>
                    </div>
                  </a>
                  <P> <a href="/Hermann-Oak-Belt-Bend-Black" class="effect-shine">Get Black Hermann Oak Belt Bend Here!</a></p>
              </li>

              <li class="col-sm-6">

                <!-- normal -->
                <div class="ih-item circle effect1">
                  <a href="#">
                    <div class="spinner"></div>
                    <div class="img"><img src="http://springfieldleather.com/assets/Week1_BeltBend_Brown.jpg" alt="img"></div>
                    <div class="info">
                      <div class="info-back">
                        <h3>Brown Belt Bends</h3>
                        <p>These Hermann Oak drum dyed belt bends are magnificent and they're on sale! Get them in black or brown.</p>
                      </div>
                    </div>
                  </a>
                  <P> <a href="/Hermann-Oak-Belt-Bend-Brown" class="effect-shine">Get Brown Hermann Oak Belt Bend Here!</a></p>
              </li>


              <li class="col-sm-6">

                <!-- normal -->
                <div class="ih-item circle effect1">
                  <a href="#">
                    <div class="spinner"></div>
                    <div class="img"><img src="http://springfieldleather.com/assets/Week1_VegTan_Split_Bundle.jpg" alt="img"></div>
                    <div class="info">
                      <div class="info-back">
                        <h3>Veg Tan Split Bundle</h3>
                        <p>Our new splitter has left us swimming in veg tan splits! Get this sweet bundle for just $15!</p>
                      </div>
                    </div>
                  </a>
                  <P> <a href="target.html" class="effect-shine">Get Your Veg Tan Split Bundle Here!</a></p>
              </li>
              <li class="col-sm-6">

                <!-- normal -->
                <div class="ih-item circle effect1">
                  <a href="#">
                    <div class="spinner"></div>
                    <div class="img"><img src="http://springfieldleather.com/assets/Week1_Jr_LegalPad_Templete.jpg" alt="img"></div>
                    <div class="info">
                      <div class="info-back">
                        <h3>Legal Pad Poly Template</h3>
                        <p>We have finally done it! Poly templates for one of our favorite projects: leather covers! Cover your legal pad in luxury with this template for only $5.</p>
                      </div>
                    </div>
                  </a>
                  <P> <a href="/Polymer-Templates-Junior-Legal-Pad-Cover" class="effect-shine">Get Your Legal Pad Template Here!</a></p>
              </li>
            </ul>
          </ul>

          <hr>

请注意：由于缺少对某些功能的支持，此代码在IE中存在许多问题，但即使IE在每行中显示主要图像。在小提琴中出现的小圆圈在我的实际网站上没有显示。

Answer 1

你真的需要修复你的标记。正如我在评论中指出的那样，您的HTML无效。无论如何，为了纠正FF中的显示问题，这是一个可能的解决方案：

Flexbox正在缩小你的img。您可以不配置它。我已将flex-shrink: 0添加到.row img

hr {
  opacity: .5;
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 80px;
  margin-right: 100px;
  border-style: inset;
  background: #00adbd;
  border-top: 0.5px dotted #fff;
}

.disabledbutton {
  pointer-events: none;
  opacity: 0.4;
}

#outeroutside {
  background-image: url("/assets/tile.jpg");
  background-color: #a00f14;
  width: 1300px;
  max-width: 100%;
  padding: 10px 10px 10px 10px;
  position: relative;
}

#outside {
  text-align: center;
  background-color: rgba(252, 251, 245, 0.95);
  width: 1200px;
  max-width: 100%;
  padding: 0px 10px 0px 0px;
}

#welcomemain p {
  width: 95%;
  display: inline-block;
  text-align: center;
  margin: 15px 5px;
  height: auto;
}

#welcomemain img {
  padding: 10px;
  max-width: 100%;
}

h2 {
  color: #2e1f11;
}

#outeroutside a:link {
  color: #996515;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
}

#outeroutside a:hover {
  color: #FFD700;
  opacity: 0.9;
}

#outeroutside a:visited {
  text-decoration: underline;
  color: #996515;
}

#outeroutside a:active {
  opacity: 0.5;
}

.row2 a {
  color: #C0C0C0 !important;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
}

.row2 a:visited {
  text-decoration: underline;
  color: #999999;
}

.row2 a:active {
  opacity: 0.5;
}

#navigation img {
  padding: 10px;
  max-width: 30%;
}

.youtube {
  position: relative;
  padding-bottom: 60%; // This is the aspect ratio
  height: 0;
  overflow: hidden;
}

.youtube iframe {
  padding: 10px 10px 10px 30px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

b {
  color: #312112;
}

i {
  color: #b05830;
}

.font {
  font-size: 15px;
}

.ih-item.circle.effect1 .spinner {
  width: 270px;
  height: 270px;
  border: 10px groove #fdec6d;
  border-right-color: #739968;
  border-bottom-color: #739968;
  border-radius: 50%;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

.ih-item.circle.effect1 .img {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: auto;
  height: auto;
}

.ih-item.circle.effect1 .img:before {
  display: none;
}

.ih-item.circle.effect1.colored .info {
  background: #1a4a72;
  background: rgba(26, 74, 114, 0.6);
}

.ih-item.circle.effect1 .info {
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: #333333;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

.ih-item.circle.effect1 .info h3 {
  color: #fff;
  text-transform: uppercase;
  position: relative;
  letter-spacing: 2px;
  font-size: 22px;
  margin: 0 30px;
  padding: 55px 0 0 0;
  height: 110px;
  text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ih-item.circle.effect1 .info p {
  color: #bbb;
  padding: 10px 5px;
  font-style: italic;
  margin: 0 30px;
  font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.ih-item.circle.effect1 a:hover .spinner {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.ih-item.circle.effect1 a:hover .info {
  opacity: 1;
}

.ih-item {
  position: relative;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

.ih-item,
.ih-item * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.ih-item a {
  color: #333;
}

.ih-item a:hover {
  text-decoration: none;
}

.ih-item img {
  width: 100%;
  height: 100%;
}

.ih-item.circle {
  position: relative;
  width: 270px;
  height: 270px;
  border-radius: 50%;
}

.ih-item.circle .img {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 50%;
}

.ih-item.circle .img:before {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

.ih-item.circle .img img {
  border-radius: 50%;
}

.ih-item.circle .info {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ih-item.circle.effect1 .spinner {
  width: 270px;
  height: 270px;
  border: 10px solid #ecab18;
  border-right-color: #1ad280;
  border-bottom-color: #1ad280;
  border-radius: 50%;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

.ih-item.circle.effect1 .img {
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 0px;
  right: 0;
  width: auto;
  height: auto;
}

.ih-item.circle.effect1 .img:before {
  display: none;
}

.ih-item.circle.effect1.colored .info {
  background: #1a4a72;
  background: rgba(26, 74, 114, 0.6)
}

.ih-item.circle.effect1 .info {
  top: 0px;
  bottom: 0;
  left: 0px;
  right: 0;
  background: #333;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

.ih-item.circle.effect1 .info h3 {
  color: #fff;
  text-transform: uppercase;
  position: relative;
  letter-spacing: 2px;
  font-size: 20px;
  margin: 0 30px;
  padding: 55px 0 0 0;
  height: 110px;
  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ih-item.circle.effect1 .info p {
  color: #bbb;
  padding: 11px 5px;
  font-style: italic;
  margin: 0 30px;
  font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.ih-item.circle.effect1 a:hover .spinner {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.ih-item.circle.effect1 a:hover .info {
  opacity: 1;
}

.row {
  margin: 5px 0px 10px 5px;
  padding: 10px 3px 30px 3px;
  width: 1115px;
  max-width: 100%;
  display: flex;
  flex-wrap: nonwrap;
  align-content: center;
  overflow-y: hidden;
  overflow-x: auto;
  background-color: rgba(238, 155, 195, 0.95);
}

.row img {
  flex-shrink: 0;
}

.row2 {
  margin: 5px 0px 5px 5px;
  padding: 10px 3px 15px 3px;
  width: 1115px;
  max-width: 100%;
  display: flex;
  flex-wrap: nonwrap;
  align-content: center;
  overflow-y: hidden;
  overflow-x: auto;
  background-color: rgba(238, 46, 54, 0.95);
}

.col-sm-6 li {
  padding: 10px 20px 10px 20px;
  max-width: 33.3%;
}

a.effect-shine:hover {
  -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .6) 30%, #000 50%, rgba(0, 0, 0, .6) 70%);
  -webkit-mask-size: 200%;
  animation: shine 2s infinite;
}

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }
  to {
    -webkit-mask-position: -50%;
  }

<ul id="week1">
            <ul class="row">

              <img src="http://springfieldleather.com/assets/Scroll_Week1.1.png">




              <li class="col-sm-6">

                <!-- normal -->
                <div class="ih-item circle effect1">
                  <a href="#">
                    <div class="spinner"></div>
                    <div class="img"><img src="http://springfieldleather.com/assets/Week1_Gator_Buckles.jpg" alt="img"></div>
                    <div class="info">
                      <div class="info-back">
                        <h3>$5 Gator Buckle Sets</h3>
                        <p>Get a selection of 6-piece gator buckle sets for just $5. These opulent adornments are jewel encrusted and waiting to make your belt fancy!</p>
                      </div>
                    </div>
                  </a>
                  <P> <a href="/5-gator-buckle-sets" class="effect-shine">Click here to see all styles! </a></p>
              </li>
              <li class="col-sm-6">

                <!-- normal -->
                <div class="ih-item circle effect1">
                  <a href="#">
                    <div class="spinner"></div>
                    <div class="img"><img src="http://springfieldleather.com/assets/Week1_Liz_CraftPack.jpg" alt="img"></div>
                    <div class="info">
                      <div class="info-back">
                        <h3>Liz's Craft Pack</h3>
                        <p>Explore the possibilities of leather craft with Liz's craft pack. Bursting at the seams with leather components, this not-so-little pack is only $25!</p>
                      </div>
                    </div>
                  </a>

                  <P> <a href="/Lizs-Craft-Pack" class="effect-shine">Get Liz's Craft Pack Here!</a></p>
              </li>
              <li class="col-sm-6">

                <!-- normal -->
                <div class="ih-item circle effect1">
                  <a href="#">
                    <div class="spinner"></div>
                    <div class="img"><img src="http://springfieldleather.com/assets/Week1_Stamping_Tools.jpg" alt="img"></div>
                    <div class="info">
                      <div class="info-back">
                        <h3>25% Off Stamping Tools</h3>
                        <p>Transform your veg tan with stamping tools! For this month only, get select stamping tools at an even lower price! Nearly 100 tools are included!</p>
                      </div>
                    </div>
                  </a>
                  <P> <a href="/tools/Tools-Specials-Closeouts-Deals/SALE-Stamping-Tools" class="effect-shine">Click here to view the selection!</a></p>
              </li>

              <li class="col-sm-6">

                <!-- normal -->
                <div class="ih-item circle effect1">
                  <a href="#">
                    <div class="spinner"></div>
                    <div class="img"><img src="http://springfieldleather.com/assets/Week1_BeltBend_Black.jpg" alt="img"></div>
                    <div class="info">
                      <div class="info-back">
                        <h3>Black Belt Bends</h3>
                        <p>These Hermann Oak drum dyed belt bends are magnificent and they're on sale! Get them in black or brown. </p>
                      </div>
                    </div>
                  </a>
                  <P> <a href="/Hermann-Oak-Belt-Bend-Black" class="effect-shine">Get Black Hermann Oak Belt Bend Here!</a></p>
              </li>

              <li class="col-sm-6">

                <!-- normal -->
                <div class="ih-item circle effect1">
                  <a href="#">
                    <div class="spinner"></div>
                    <div class="img"><img src="http://springfieldleather.com/assets/Week1_BeltBend_Brown.jpg" alt="img"></div>
                    <div class="info">
                      <div class="info-back">
                        <h3>Brown Belt Bends</h3>
                        <p>These Hermann Oak drum dyed belt bends are magnificent and they're on sale! Get them in black or brown.</p>
                      </div>
                    </div>
                  </a>
                  <P> <a href="/Hermann-Oak-Belt-Bend-Brown" class="effect-shine">Get Brown Hermann Oak Belt Bend Here!</a></p>
              </li>


              <li class="col-sm-6">

                <!-- normal -->
                <div class="ih-item circle effect1">
                  <a href="#">
                    <div class="spinner"></div>
                    <div class="img"><img src="http://springfieldleather.com/assets/Week1_VegTan_Split_Bundle.jpg" alt="img"></div>
                    <div class="info">
                      <div class="info-back">
                        <h3>Veg Tan Split Bundle</h3>
                        <p>Our new splitter has left us swimming in veg tan splits! Get this sweet bundle for just $15!</p>
                      </div>
                    </div>
                  </a>
                  <P> <a href="target.html" class="effect-shine">Get Your Veg Tan Split Bundle Here!</a></p>
              </li>
              <li class="col-sm-6">

                <!-- normal -->
                <div class="ih-item circle effect1">
                  <a href="#">
                    <div class="spinner"></div>
                    <div class="img"><img src="http://springfieldleather.com/assets/Week1_Jr_LegalPad_Templete.jpg" alt="img"></div>
                    <div class="info">
                      <div class="info-back">
                        <h3>Legal Pad Poly Template</h3>
                        <p>We have finally done it! Poly templates for one of our favorite projects: leather covers! Cover your legal pad in luxury with this template for only $5.</p>
                      </div>
                    </div>
                  </a>
                  <P> <a href="/Polymer-Templates-Junior-Legal-Pad-Cover" class="effect-shine">Get Your Legal Pad Template Here!</a></p>
              </li>
            </ul>
          </ul>

          <hr>