Text over images

[makamo66]

I want my text to appear on top of the images even without the hover.

/* TOP CATEGORIES */

.catWrap {
  position: relative;
  text-align:center;
  font-size: 18px;
  font-weight: 400;
  color: #153d4d !important;
  padding: 0;
  margin: 0;
  visibility: visible;
}
.catWrap a{ color: #153d4d !important;
visibility: visible;
z-index: 99;
position: relative;
}

.catWrap img {
	z-index: -1;
	position: relative;
}

.catDescription {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(245, 245, 245, 0.84);
  color: #000;
  z-index: 100;
  height:100%;
  width:100%;
  visibility: visible !important;
  opacity: 0;
  -webkit-transition: visibility opacity 0.2s;
  margin:0;	
  text-align:center;
}

.catDescription p {
	padding:20% 0;
	visibility: visible;
	color: #000;
	z-index: 101;
}

.catDescription a {
	visibility: visible;
	color: #000;
}

.catWrap:hover .catDescription {
	position: absolute;
	top: 0;
	left: 0;
  visibility: visible;
  opacity: 1;
}

.catWrap .catDescription {
  visibility: visible;
  opacity: 0;
}
/* END TOP CATEGORIES */

                   <div class="catWrap">
             <img src="images/saniflo/toilet-kits.jpg" width="230" height="187" alt="toilet pumps"/>
             <div class="catDescription"><p><a href="http://www.decorisland.com/brandcategory/saniflo/bathroom/toilets-bidets/toilet/toilet-kits/">Toilet<br>Kits</a></p></div>
             </div>

[Beverleyh]

Untested - remove this;

.catWrap:hover .catDescription {
	position: absolute;
	top: 0;
	left: 0;
  visibility: visible;
  opacity: 1;
}

.catWrap .catDescription {
  visibility: visible;
  opacity: 0;
}

and opacity:0; from .catDescription