CSS transform - translate3d

testing image hover center image on container.

by litespeedtdf

HTML

<!--
<a href="someaddress">test</a>
<div class="divBlue">
  <div class="div">
    <img class="thumb" src="http://myrrix.com/wp-content/uploads/2012/06/stackoverflow.png" />
  </div>
</div>
-->

<table class="imagetable">
  <thead>
    <tr>
      <th>Form #</th>
      <th>Description</th>
      <th>Qty Available</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="divBlue">
          <div class="div">
            <div class="div2">
              <img class="thumb" src="http://myrrix.com/wp-content/uploads/2012/06/stackoverflow.png" />
            </div>

            <div class="info">
              <label>Test</label>
              <a href="#">link</a>
            </div>
          </div>
        </div>
      </td>

      <td>

        <div class="divBlue">
          <div class="div">
            <div class="div2">
              <img class="thumb" src="http://myrrix.com/wp-content/uploads/2012/06/stackoverflow.png" />
            </div>
            <div id="jm" class="testDiv">
              <span>cancel</span>
            </div>
          </div>
        </div>

      </td>
      <td>
      </td>
    </tr>
    <tr>
      <td>
      </td>
      <td>
      </td>
      <td>
      </td>
    </tr>
    <tr>
      <td>
      </td>
      <td>
        <div class="divBlue">
          <div class="div">
            <div class="div2">
              <img class="thumb" src="http://myrrix.com/wp-content/uploads/2012/06/stackoverflow.png" />
            </div>
            <div class="info">
              <label>Test</label>
              <br/>
              <a href="#">link</a>
            </div>

          </div>
        </div>
      </td>
      <td>
      </td>
    </tr>
  </tbody>
</table>

CSS

.divBlue .div2 img.thumb {
  position: absolute;
  top: 0px;
  transition: transform 2s ease-in-out;
  background: #333399;
}

.info {
  position: absolute;
  bottom: 0;
  border: 2px solid green;
  width: 100%;
}

.div {
  position: relative;
  border: 2px solid red;
  height: 90px;
  padding: 4px;
}

.testDiv {
  border: 2px solid black;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
}

.divBlue .div2:hover img.thumb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(90px, 50px, 0px);
}

.div2 {
  width: 100%;
  height: 25%;
}

.div >:not(.testDiv):hover {
  color: red;
}

.divBlue {
  border: 2px solid Blue;
  height: 100px;
  padding: 4px;
}

.tbl {
  border: 2px solid black;
}

table.imagetable {
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  color: #333333;
  border-width: 1px;
  border-color: #999999;
  border-collapse: collapse;
}

table.imagetable th {
  background: #b5cfd2 url('cell-blue.jpg');
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #999999;
}

table.imagetable td {
  background: #dcddc0 url('cell-grey.jpg');
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #999999;
}