Only some images are not displaying in Firefox - html

Question

I am having an odd issue with certain images not displaying in Firefox, but displaying in every other browser.
You can see the differences between Chrome and Firefox here
I am using an unordered list to display a row of images that are list items. However, at the beginning of each row, I am placing a normal image in the list that is not tagged as a list item. This works perfectly in Chrome, Edge, IE and Safari but, for some reason, only a few of those images won't display in Firefox. What is confusing is that there is nothing fundamentally different about rows one and two when compared to rows three and four - that I see anyway.
It is also squishing the images in row three and four and I'm not having that issue in other browsers.
The only differences I can see are image URLs. I tried removing the disable divider to see if that made a difference and it did not.
I have created a JS Fiddle to replicate the issue.
What is included below is a greatly reduced version of what you will find using the link.
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> Click here to see all styles! </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> Get Liz's Craft Pack Here!</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> Click here to view the selection!</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> Get Black Hermann Oak Belt Bend Here!</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> Get Brown Hermann Oak Belt Bend Here!</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> Get Your Veg Tan Split Bundle Here!</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> Get Your Legal Pad Template Here!</p>
</li>
</ul>
</ul>
<hr>
Please note: This code has a number of problems in IE due to lack of support for some features, however even IE is displaying the leading image in each row. There are small circles in the li's that appear in the JS Fiddle that do not display on my actual website.

Answer 1

You really need to fix your markup. As pointed out in my comment, you have invalid HTML. Regardless, to correct the display issue in FF, here is a possible solution:
Flexbox is shrinking your img. You can configure it not to. I've added flex-shrink: 0 to .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> Click here to see all styles! </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> Get Liz's Craft Pack Here!</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> Click here to view the selection!</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> Get Black Hermann Oak Belt Bend Here!</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> Get Brown Hermann Oak Belt Bend Here!</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> Get Your Veg Tan Split Bundle Here!</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> Get Your Legal Pad Template Here!</p>
</li>
</ul>
</ul>
<hr>