表图像上的 css 过渡

我如何在我的假期列表中使用 css 转换，以便当我将鼠标悬停在图像上时，它需要显示大图像大小，当我鼠标悬停时，它需要回到 mormal，我知道 JavaScript，但我希望用 css3 完成此操作http://jsfiddle.net/TwRTc/

<html>
 <head>
 <style>
# select
{
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
 </style>
  </head>
  <body>
  <table border="0" cellpadding="0" cellspacing="15" style="font-family:Comic Sans MS; color:#0066CC;">
<tr align="left">
        <TH></TH>
         <th>HOLIDAYS </th>
         <th>DAYS OBSERVED</th>
</tr>
<tr>
        <td><img class="select" src="C:/Documents and Settings/user/Desktop/new year1.jpg" width="25" height="25" border="1">&nbsp;</td>
        <td> NEW YEARS DAY </td>
        <td>JANUARY 01, 2012</td>
</tr>
<tr>
        <td><img class="select" src="C:/Documents and Settings/user/Desktop/bhogi.jpg" width="25" height="25" border="1"></td>
        <td>BHOGI/MAKAR SANKRANTHI</td>
        <td> JANUARY 13, 2012</td>
</tr>
<tr>
        <td><img src="C:/Documents and Settings/user/Desktop/republic day.jpg" width="25" height="25" border="1"></td>
        <td>REPUBLIC DAY </td>
        <td>JANUARY 26, 2012</td>
</tr>
<tr>
        <td><img src="C:/Documents and Settings/user/Desktop/ugadhi.jpg" width="25" height="25" border="1" ></td>
        <td>UGADI </td>
        <td> MARCH 23, 2012</td>
</tr>
<tr>
        <td><img src="C:/Documents and Settings/user/Desktop/good friday.jpg" width="25" height="25" border="1" ></td>
        <td>GOOD FRIDAY </td>
        <td>APRIL 06, 2012</td>
</tr>
<tr>
        <td><img src="C:/Documents and Settings/user/Desktop/independence day.jpg" width="25" height="25" border="1"></td>
        <td>INDEPENDENCE DAY</td>
        <td>AUGUST 15, 2012</td>
</tr>
<tr>
        <td><img src="C:/Documents and Settings/user/Desktop/489ramzan.gif" width="25" height="25" border="1"></td>
        <td> RAMZAN</td>
        <td>AUGUST 20, 2012</td>
</tr>
<tr>
        <td><img src="C:/Documents and Settings/user/Desktop/vinaka chowathi.jpg" width="25" height="15" border="1" ></td>
        <td>VINAYAKA CHAVITHI</td>
        <td> SEPTEMBER 19, 2012</td>
</tr>
<tr>
        <td><img src="C:/Documents and Settings/user/Desktop/dasara.jpg" width="25" height="25" border="1"></td>
        <td>DASARA</td>
        <td>OCTOBER 24, 2012</td>
</tr>
<tr>
        <td><img src="C:/Documents and Settings/user/Desktop/diwali1.jpg" width="25" height="25" border="1"></td>
        <td>DIWALI</td>
        <td>NOVEMBER 13,2012</td>
</tr>
<tr>
        <td><img src="C:/Documents and Settings/user/Desktop/images.jpg" width="25" height="25" border="1"></td>
        <td>CHRISTMAS</td>
        <td>DECEMBER 25, 2012</td>
</tr>
</table>
  </body>
</html>

您需要

使用 CSS3 比例。我将写一个快速示例。

这是一个简单的实现：

img:hover { 
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
}

请记住，您可能应该缩小默认图像视图以获得最佳视觉效果。

如果你的图像是300px x 200px，那么你可以这样做：

img {
  width: 200px; 
}

更新了你的小提琴：http://jsfiddle.net/TwRTc/2/

相关内容

最新更新

热门标签：