Question

我用表格制作了HTML图像网格。

我只想使用css

这是HTML

<table id="mainwrapper" cellspacing="0" cellpadding="0">
 <tr>
  <td colspan="2"><a href="tuin.html"><img src="images/biggerthumb/tuin12.png"/> <span><img width="50px" src="images/biggerthumb/tuin12.png"/> </span></a></td>
  <td><a href="rivier.html"><img width="50px" src="images/biggerthumb/rivier4.png" /> </a></td>
   <td colspan="2" rowspan="2"><a href="living.html"><img width="50px" 
    src="images/biggerthumb/living7.png" /><span><img width="50px" 
     src="images/biggerthumb/living7.png" /></span></a></td>
       <td rowspan="2"><a href="rivier.html"><img width="50px" 
        src="images/biggerthumb/rivier6.png" /><span><img width="50px" 
          src="images/biggerthumb/rivier6.png" /></span> </a></td></tr>
         <tr><td><a href="keuken.html"><img width="50px" 
       src="images/biggerthumb/keuken1.png" /><span><img width="50px" 
        src="images/biggerthumb/keuken1.png" /></span> </a></td>
         <td rowspan="2"><a href="living.html"><img width="50px" 
      src="images/biggerthumb/living5.png" /><span><img width="50px" 
         src="images/biggerthumb/living5.png" /></span> </a></td>
         <td><a href="slaapkamers.html"><img width="50px" 
      src="images/biggerthumb/kamer1.png" /><span><img width="50px" 
      src="images/biggerthumb/kamer1.png" /></span> </a></td></tr></table>

但是现在我想在有人悬停在表格单元格上时放大图像。但是该图像必须在其他图像之前。

这里我尝试过

td > a > img:hover {

        vertical-align: top;
        z-index: 100;
        position: absolute;
               }

但这没用。图像需要在与原始固定图像相同的位置放大。

非常感谢！

Answer 1

使用transform：https://www.w3schools.com/howto/howto_css_zoom_hover.asp

td > a > img:hover {
 transform: scale(1.5);
}
               
td > a > img{
transition: transform .2s;
}

<table id="mainwrapper" cellspacing="0" cellpadding="0">
<tr>
 <td>
    <a href="slaapkamers.html">
      <img width="50px"src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
    <span><img width="50px" 
      src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
      </span> 
    </a>
  </td>
    <td>
    <a href="slaapkamers.html">
      <img width="50px"src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
    <span><img width="50px" 
      src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
      </span> 
    </a>
  </td>
</tr>
</table>

具有悬停效果的图像网格

1 个答案: