Overlay on hover

by gavinfriel

HTML

<div class="customerLogoWrapper">
  <div class="fixer-container">
    <div class="vertical-align">
      <div class="grayscale" id="irishwater"></div>
    </div>
  </div>
</div>

CSS

div.grayscale {
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(100%);
  /* Chrome 19+ & Safari 6+ */
  -webkit-transition: all .2s ease;
  /* Fade to color for Chrome and Safari */
  -webkit-backface-visibility: hidden;
  /* Fix for transition flickering */
}

div.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

.vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.main-container {
  float: left;
  position: relative;
  left: 50%;
}

.fixer-container {
  float: left;
  position: relative;
  left: -50%;
  width: 100%;
}

.customerLogoWrapper {
  float: left;
  position: relative;
  left: 50%;
  height: 56px;
  width: 150px;
	padding-top:2.5%;
	padding-bottom:2.5%;
}

#irishwater {
  content: url(http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/56f3b98c7da24fd59ecdfa03/1458813324535/irishwater.png);
}
#equitec {
  content: url(http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/56f3c5699f7266fac1570fd2/1458816361332/Equitec.png);
}
#dard {
  content: url(http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/56f3c55c9f7266fac1570f96/1458816348585/DARD.png);
}
#doe {
  content: url(http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/56f3c5609f7266fac1570fab/1458816352724/doe.png);
}
#niwater{
   content: url(http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/56f3c5569f7266fac1570f7e/1458816342142/niwater.png);
}
#bordgais{
   content: url(http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/56f3c52c9f7266fac1570ee5/1458816300540/brdgais.png);
}
#nie{
   content: url(http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/56f3c5339f7266fac1570efe/1458816307814/nie.png);
}
#capita{
   content: url(http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/56f3c5249f7266fac1570ec7/1458816292572/Capita.png);
}
#cme{
   content:...