表格圖像上的Css轉換

如何在我的假期列表中使用css轉換，以便當我將鼠標懸停在圖像上時，它需要顯示大圖像大小，當我將鼠標移出時，需要返回到正常狀態，我知道JavaScript，但我想這與CSS3 http://jsfiddle.net/TwRTc/表格圖像上的Css轉換

<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>

來源

2012-04-30 Navyah

你想使用CSS3規模來實現。我會寫一個快速樣本。

這是一個簡單的實現：

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

記住，你應該縮小爲最佳的視覺效果，您的默認圖像視圖。

如果你的圖片是300像素x 200像素，那麼你會做這種方式：

img { 
    width: 200px; 
}

更新您的提琴：http://jsfiddle.net/TwRTc/2/

來源

2012-05-01 18:24:24 Armstrongest

表格圖像上的Css轉換

回答

相關問題