CODEWITHSUNDEEP
css
Ari
Ari

Reputation: 6189

Image absolute on hover then back to relative

I'm creating a thumbnail effect where a user can hover over an image and it enlarges across the screen setting the position to absolute so nothing else shifts around, but on mouse off everything freaks out as it resizes back down.

.thumb_img {
  position: relative;
  max-height: 100px;
  max-width: 100px;
  transition: 0.1s;
}

.thumb_img:hover {
  position: absolute;
  max-width: 600px;
  max-height: 600px;
  width: auto;
  height: auto;
}
<table>
  <tr>
    <td><img class="thumb_img" src="https://picsum.photos/300/200?image=990"></td>
  </tr>
</table>

Upvotes: 0

Views: 52

Answers (2)

Lakshya Saini
Lakshya Saini

Reputation: 86

.thumb_img {
      max-height: 100px;
      max-width: 100px;
      transition: 0.1s;
    }

    .thumb_img:hover {
      max-width: 600px;
      max-height: 600px;
      width: auto;
      height: auto;
      z-index: 9999;
      position: absolute;
    }
<table>
        <tr>
            <td><img class="thumb_img" src="https://picsum.photos/300/200?image=990"></td>
        </tr>
        <tr>
            <td><img class="thumb_img" src="https://picsum.photos/300/200?image=990"></td>
        </tr>
        <tr>
            <td><img class="thumb_img" src="https://picsum.photos/300/200?image=990"></td>
        </tr>
    </table>

Upvotes: 1

Jibin Joseph
Jibin Joseph

Reputation: 1315

Consider using CSS transforms instead:

.thumb_img {
  max-height: 100px;
  max-width: 100px;
  transition: 0.1s;
}

.thumb_img:hover {
  transform: scale(1.2);
}
<table>
  <tr>
    <td><img class="thumb_img" src="https://cdn4.iconfinder.com/data/icons/logos-3/600/React.js_logo-512.png"></td>
  </tr>
</table>

Upvotes: 2

Related Questions