2 Replies Latest reply on Jan 17, 2007 7:49 AM by coldfuse228

    How to overlap an image using css in my .cfm

    coldfuse228
      Hi, I know this is a little off-topic, but in my gallery.cfm, I have a couple of rows that have an image in it, I was wondering how I can use css to put some text over the image? Like for example, how can I put some red text "Sold out" over toy1.jpg? I have tried using z-index but that requires some positioning but in this case there is no positions ? Can someone please help me on this?
      Sample code:
      <table align="center">
      <tr>
      <td>
      <img src="images/toy1.jpg" width="128" height="180" border="0">
      </td>
      </tr>
      <tr>
      <td>
      <img src="images/toy1.jpg" width="128" height="180" border="0">
      </td>
      ...

      Thank you,
      C
        • 1. Re: How to overlap an image using css in my .cfm
          Fernis Level 3
          Hope this helps.

          <style type="text/css">
          .cell {position:relative;}
          .productImage {top:0px; left:0px; width:128px; height:180px;}
          .soldText {position:absolute; top:30px; left:0px;
          font-size:2.0em; color:red; width:100%;
          text-align:center;
          font-family:impact,lucida console,verdana;
          opacity:.8}
          </style>

          <table align="center" border="2">
          <tr>
          <td>
          <div class="cell">
          <div class="productImage"><img src="images/toy1.jpg" width="128" height="180" border="0"></div>
          <div class="soldText">Sold!</div>
          </div>
          </td>
          </tr>
          <tr>
          <td><div class="cell">
          <div class="productImage"><img src="images/toy1.jpg" width="128" height="180" border="0"></div>
          <div class="soldText">Sold!</div>
          </div>
          </td>
          </tr>
          </table>
          • 2. Re: How to overlap an image using css in my .cfm
            coldfuse228 Level 1
            Hi Fernis , thank you so much! This is exactly what I was looking for, thanks again!
            -c