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