GIFs not displaying in liquid code?

[kingbeanz]

Hi,

I'd like the GIFs to display like this:


But currently they are showing nothing:

Here's my website:
https://emery-london.com/collections/womens-best-sellers/products/ultra-light-down-puffer-jacket

Password:
smeared

And here's the liquid code:

<div id="shopify-section-template--22895475917149__featured_icons_Uyk6kU" class="shopify-section">
<style>
h2.SectionHeader__Heading.Heading.u-h1 {
color: #000000;
}
p.partt {
color: #000000;
}
h3.SectionHeader__Heading.Heading.u-h5.decr {
color: #000000;
}
.outerrrr {
width: 100%;
background: #ffffff;
padding: 25px 0px;
display: inline-block;
}
.cardboody h4 {
margin-top: 0;
color: #000;
}
.badgessection {
max-width: 1400px;
margin: 0px auto;
color: #000;
padding: 0 10px;
}
div#badgeouter {
margin-top: 60px;
}
.card-body {
word-wrap: break-word;
}
.one-third.badgesss {
float: left;
}
.card-body {
padding: 0px 35px;
}
.medium-up--one-third.imgic {
float: left;
display: inline-flex;
justify-content: center;
align-items: flex-start;
width: calc(25% - 0px);
padding: 5px;
}
.medium-up--one-third.imgic img {
width: 60px;
}
.cardboody h4 {
margin-bottom: 2px;
}
.cardboody h4 b {
font-size: 16px;
}
.cardboody {
padding-left: 11px;
}
.cardboody p {
font-size: 15px;
}
.headercon {
display: flex;
padding: 8px;
flex-wrap: wrap;
}
.cardboody h4 {
margin-top: 0;
}
.cardboody p {
margin: 0;
}
.medium-up--one-third.imgic svg {
width: 28px;
height: 28px;
margin-top: 4px;
margin-right: 8px;
}
@media only screen and (max-width: 769px) {
.medium-up--one-third.imgic {
display: inline-flex !important;
width: calc(100% - 0px);
margin: 2px 0px;
padding: 5px !important;
justify-content: left;
}
.cardboody {
padding-left: 5px;
}
.outerrrr {
padding: 10px 0px;
}
.medium-up--one-third.imgic svg {
width: 20px;
}
.cardboody h4 b {
font-size: 13px;
}
}
</style>
<div class="outerrrr">
<div class="badgessection">
<div class="headercon" id="deskti">
<div class="medium-up--one-third imgic">
<img src="https://emery-london.com/cdn/shop/files/newfirsticon_1000x-ezgif.com-optimize.gif" width="" height="">
<div class="cardboody">
<h4><b>Maximum flexibility</b></h4>
<p>Comfortable fit and made of high quality fabrics, with sustainability as a priority.</p>
</div>
</div>
<div class="medium-up--one-third imgic">
<img src="https://emery-london.com/cdn/shop/files/2newfirsticon_1000x_864dadee-d057-4b41-a0d7-a21cbbcfda82.gif" width="" height="">
<div class="cardboody">
<h4><b>Wrinkle free</b></h4>
<p>No more ironing: machine wash, hang up and done.</p>
</div>
</div>
<div class="medium-up--one-third imgic">
<img src="https://emery-london.com/cdn/shop/files/3newfirsticon_1000x-ezgif.com-optimize.gif" width="" height="">
<div class="cardboody">
<h4><b>Breathable &amp; Quick Drying Fabric</b></h4>
<p>Fresh &amp; comfortable all day long.</p>
</div>
</div>
<div class="medium-up--one-third imgic">
<img src="https://emery-london.com/cdn/shop/files/4newfirsticon_1000x_99d24c6a-6c2e-4188-ab4c-e9606cc46703.gif" width="" height="">
<div class="cardboody">
<h4><b>No odor</b></h4>
<p>Neutralizes the bacteria that cause body odor when we sweat.</p>
</div>
</div>
</div>
</div>
</div>
</div>

Any help greatly appreciated!!! 

[BSSCommerce-HDL · Accepted solution]

Hi @kingbeanz, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.medium-up--one-third.imgic img {
    opacity: 1 !important;
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[kingbeanz]

YOU ARE AMAZING THANK YOU!!

[BSSCommerce-HDL]

@kingbeanz No problem, Have a good day 😍