What is the best way to apply the same effect to multiple images without affecting the ones I haven't hovered over?

Question

What is the best way to apply the same effect to multiple images without affecting the ones I haven't hovered over?

I am currently facing an issue with 6 images displayed in a table, 3 per row across 2 rows. I applied the "grow" effect to all the images but it seems like everything is moving around in a confusing manner. Does anyone have suggestions on how I can resolve this?

CSS:

.raste img {
  height: 190px;
  width: 300px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.raste img:hover {
  width: 315px;
  height: 205px;
}

HTML:

<td>
  <li>
    <a href="project1.html">
      <div class="raste">
        <img src="log.jpg" alt="" width="300" />
      </div>
    </a>
  </li>
</td>

I appreciate any insights or solutions you may have. Thank you in advance.

html image css html-table

Answer 1

Answer №1

Consider using the transform property instead:

.raste img {
  height: 190px;
  width: 300px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.raste img:hover {
  -webkit-transform: scale(1.079);
          transform: scale(1.079); /* Adjust this value based on your requirements */
}

Answer 2

Consider using the transform property instead:

.raste img {
  height: 190px;
  width: 300px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.raste img:hover {
  -webkit-transform: scale(1.079);
          transform: scale(1.079); /* Adjust this value based on your requirements */
}

What is the best way to apply the same effect to multiple images without affecting the ones I haven't hovered over?

Answer №1

Similar questions

Table featuring identical submit buttons in each row: initial submit button is nonfunctional (potential issue with multiple identical IDs)

The synchronization between the First Column Scroll and Table Filter Function is out of alignment

Resize a container to match the height of either its children or the full height of the window

Creating an Excel spreadsheet from an HTML table with compatibility across different web browsers

Outlook 2010 failing to display background-color correctly

Switching the favicon to utilize the favicon.ico file

Adjust the size of a div element dynamically to maintain the aspect ratio of a background image while keeping the

How can I customize the variables in Webpack for Sass and Foundation?

5 Bootstrap Form Validation: Improve Your Form Experience

Is it possible to nest an HTML <span> inside a label tag in a Rails form_for?

When converting Html to Pdf, the styling on the top of the body is experiencing additional padding and margin

Is it possible to use PHP to retrieve and display an entire webpage from a separate domain?

Overlapping dynamic content causing CSS nested scrollbars to clash at full width of 100%

Using Angular, you can incorporate a dynamic href inside interpolation by using

Ways to prevent my website from being accessed through the Uc Browser

What is the best way to make a selected link stand out with a highlight?

An easy way to divide an array into a table

What is the best way to assign a dynamic width to a block element?

Update the CSS styles

A comprehensive guide on creating a package that combines an href link with an <li> element