I am trying to add a zoom effect on hover of an image, I will post my code below:
<asp:TableRow>
<asp:TableCell CssClass="space">
<a href="www.google.com" id="myImage" runat="server">
<img src="Images/myIcon" style="border: none;" alt="my text goes here" /></a>
</asp:TableCell>
CSS:
.space {
padding-bottom: .6em;
}
.image:hover img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
This is currently not running the hover css I have attached... any ideas of why it isn't running the hover css?
.image does not seem to be defined in your example:
.image:hover img {
try:
.space:hover img
use scale property to zoom and transition for animation
.img:hover
{
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
and for complete tutorial click here http://talkerscode.com/webtricks/image-zoom-in-on-hover-using-css3.php
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.