testhome

HTML

 

<div class=”logo-container”>
<ul>
<li class=”tultex”><a href=”#”><img title=”Tultex” alt=”Teltex” src=”https://www.tmaker.my/wp-content/uploads/2017/12/tultex_color.png”> </a> </li>
<li class=”north”><a href=”#”><img title=”North Harbour” alt=”North Harbour” src=”https://www.tmaker.my/wp-content/uploads/2017/12/northharbour_color.png”> </a> </li>
<li class=”anvil”><a href=”#”><img title=”Anvil” alt=”Anvil” src=”https://www.tmaker.my/wp-content/uploads/2017/12/anvil_color.png”></a> </li>
<li class=”sarra”><a href=”#”><img title=”Sarra” alt=”sarra” src=”https://www.tmaker.my/wp-content/uploads/2017/12/sarra_color.png”></a> </li>
<li class=”cross”><a href=”#”><img title=”Cross Runner” alt=”Cross Runner” src=”https://www.tmaker.my/wp-content/uploads/2017/12/crossrunner_color.png”> </a> </li>
<li class=”oren”><a href=”#”><img title=”Oren Sports” alt=”Oren Sports” src=”https://www.tmaker.my/wp-content/uploads/2017/12/orensport_color.png”></a> </li>
<li class=”gildan”><a href=”#”><img title=”Gilden” alt=”Gilden” src=”https://www.tmaker.my/wp-content/uploads/2017/12/gildan_color.png”> </a> </li>
<li class=”unique”><a href=”#”><img title=”Unique” alt=”Unique” src=”https://www.tmaker.my/wp-content/uploads/2017/12/unique_color.png”> </a> </li>
<li class=”enzo”><a href=”#”><img title=”Enzo” alt=”Enzo” src=”https://www.tmaker.my/wp-content/uploads/2017/12/enzo_color.png”> </a> </li>
<li class=”arora”><a href=”#”><img title=”Arora Sports” alt=”Arora Sports” src=”https://www.tmaker.my/wp-content/uploads/2017/12/arorasports_color.png”> </a> </li>
<li class=”alam”><a href=”#”><img title=”Alam Fashion” alt=”Alam Fashion” src=”https://www.tmaker.my/wp-content/uploads/2017/12/alamfashion_color.png”></a> </li>
</ul>
</div>

CSS

<style type=”text/css”>
.logo-container ul {
margin: 1em 0;
padding: 0;
text-align: center;
}

.logo-container ul li {
text-align: center;
display: inline-block;
height: auto;
width: auto;
margin: 10px;
}
.logo-container a img{ -webkit-filter: grayscale(100%);
filter: grayscale(100%);filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’><filter id=\’grayscale\’><feColorMatrix type=\’matrix\’ values=\’0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\’/></filter></svg>#grayscale”);
filter: gray;
-webkit-filter: grayscale(1); }

.logo-container a:hover img{ -webkit-filter: none;
filter: none; }

.logo-container a {
position: relative; display: inherit;
}

.logo-container a:after {
content: “”;
height: 21px;
background-color: #d40000;
position: absolute;
left: 0px;
right: 0;
bottom: 0;
color: white;
width: 150px;

}

li.tultex a:after {
content: “Tultex”;
}
li.north a:after {
content: “North”;
}
li.anvil a:after {
content: “Anvil”;
}
li.anvil a:after {
content: “Anvil”;
}
li.sarra a:after {
content: “Sarra”;
}
li.cross a:after {
content: “Cross”;
}
li.oren a:after {
content: “Oren”;
}
li.gildan a:after {
content: “Gildan”;
}
li.unique a:after {
content: “Unique”;
}
li.enzo a:after {
content: “Enzo”;
}
li.arora a:after {
content: “Arora”;
}
li.alam a:after {
content: “Alam”;
}
.logo-container {
display: block;
}</style>