Want to add text on top of images

HTML & CSS
1

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 */

<section class="brand-top-categories">
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
		  <tbody>
		    <tr>
              <td> 
                   <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>
              </td>
              <td>
              <div class="catWrap">
             <img src="images/saniflo/toilet-pumps.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-pumps/">Toilet<br>Pumps</a></p></div>
             </div>
              </td>
		      <td>
              <div class="catWrap">
             <img src="images/saniflo/toilet-bowls.jpg" width="230" height="187" alt="toilet bowls"/>
             <div class="catDescription"><p><a href="http://www.decorisland.com/brandcategory/saniflo/bathroom/toilets-bidets/toilet/toilet-bowls/">Toilet<br>Bowls</a></p></div>
             </div>
              </td>
		    </tr>
		    <tr>
               <td> 
              <div class="catWrap">
             <img src="images/saniflo/two piece components.jpg" width="230" height="187" alt="two-piece components"/>
             <div class="catDescription"><p><a href="http://www.decorisland.com/brandcategory/saniflo/bathroom/toilets-bidets/toilet/two-piece/">Two-Piece <br>Components</a></p></div>
             </div>
             </td>
		      <td> 
              <div class="catWrap">
             <img src="images/saniflo/toilet-tanks.jpg" width="230" height="187" alt="toilet tanks"/>
             <div class="catDescription"><p><a href="http://www.decorisland.com/brandcategory/saniflo/bathroom/toilets-bidets/toilet/toilet-tanks/">Toilet<br>Tanks</a></p></div>
             </div>
              </td>
      		<td>
             <div class="catWrap">
             <img src="images/saniflo/Miscellaneous-Accessories.jpg" width="230" height="187" alt="miscellaneous accessories"/>
             <div class="catDescription"><p><a href="http://www.decorisland.com/brandcategory/saniflo/bathroom/bathroom-accessories/miscellaneous-accessories/">Miscellaneous<br>Accessories</a></p></div>
             </div>
             </td>
		    </tr>

		  </tbody>
		</table>
1 Like
2

What happens if you remove the pseudo “:hover” from
.catWrap:hover .catDescription {

1 Like
3

… and delete opacity: 0 in the next rule.

In fact, you can delete that next rule, anyway, along with most of the duplicated properties in your code. Unless their values are changed, properties only need to be declared once. So, you do not need all of the visibility:visibles in your rules or any of them, it seems, since elemets are visible by default.

1 Like
4

I’m not really sure what you are after but adding these 2 rules will show the text by default and then allow the background to show on hover as before.

.catWrap .catDescription{opacity:1;background:transparent}
.catWrap:hover .catDescription{  background: rgba(245, 245, 245, 0.84);}

If that was what you wanted :slight_smile:

5

Just in case you would like the entire image with text to be clickable, give this a try…
(It is a “working page”. Copy it to a file and open it in your browser to see how it works.)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/want-to-add-text-on-top-of-images/214925/
makamo66
Feb 9,2016 5:34 PM
-->
    <style type="text/css">

/* TOP CATEGORIES */

td {
    text-align:center;
    vertical-align:middle;
    padding:0;
}
a {
    display:table;
    border-spacing:0;
    position:relative;
    margin:0 auto;
}
img {
    display:block;
    margin:0 auto;
}
.catDescription {
    position:absolute;
    top:50%;
    left:0;
    right:0;
    transform:translateY(50%);
    color:#153d4d;
    font-weight:bold;
    font-size:1.25em;
    margin:0;
}

/* END TOP CATEGORIES */

a:link span,
a:visited span {text-decoration:underline;}
a:hover {box-shadow:0 0 3px 2px blue;}
a:hover span {color:#00f;}
a:active {box-shadow:0 0 3px 2px red;}
a:active span {color:#f00;}

    </style>
</head>
<body>

<section class="brand-top-categories">
    <table width="100%" border="1" cellspacing="4" cellpadding="0">
    <tbody>
        <tr>
            <td>
                <a href="http://www.decorisland.com/brandcategory/saniflo/bathroom/toilets-bidets/toilet/toilet-kits/">
                    <img src="http://placehold.it/230x187/bbffdd" width="230" height="187" alt="toilet pumps">
                    <span class="catDescription">Toilet<br>Kits</span>
                </a>
            </td>
            <td>
                <a href="http://www.decorisland.com/brandcategory/saniflo/bathroom/toilets-bidets/toilet/toilet-pumps/">
                    <img src="http://placehold.it/230x187/ffddbb" width="230" height="187" alt="toilet pumps">
                    <span class="catDescription">Toilet<br>Pumps</span>
                </a>
            </td>
            <td>
                <a href="http://www.decorisland.com/brandcategory/saniflo/bathroom/toilets-bidets/toilet/toilet-bowls/">
                    <img src="http://placehold.it/230x187/ddbbff" width="230" height="187" alt="toilet bowls">
                    <span class="catDescription">Toilet<br>Bowls</span>
                </a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="http://www.decorisland.com/brandcategory/saniflo/bathroom/toilets-bidets/toilet/two-piece/">
                    <img src="http://placehold.it/230x187/ddffbb" width="230" height="187" alt="two-piece components">
                    <span class="catDescription">Two-Piece <br>Components</span>
                </a>
            </td>
            <td>
                <a href="http://www.decorisland.com/brandcategory/saniflo/bathroom/toilets-bidets/toilet/toilet-tanks/">
                    <img src="http://placehold.it/230x187/ffbbdd" width="230" height="187" alt="toilet tanks">
                    <span class="catDescription">Toilet<br>Tanks</span>
                </a>
            </td>
            <td>
                <a href="http://www.decorisland.com/brandcategory/saniflo/bathroom/bathroom-accessories/miscellaneous-accessories/">
                    <img src="http://placehold.it/230x187/bbddff" width="230" height="187" alt="miscellaneous accessories">
                    <span class="catDescription">Miscellaneous<br>Accessories</span>
                </a>
            </td>
        </tr>
    </tbody>
    </table>
</section>

</body>
</html>

Cheers

6

Deleting opacity worked. Thank you.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.