Programming Forums
User Name Password Register
 

RSS Feed
FORUM INDEX | TODAY'S POSTS | UNANSWERED THREADS | ADVANCED SEARCH

Reply
 
Thread Tools Display Modes
Old Nov 19th, 2011, 5:42 PM   #1
laresistance2
Programmer
 
Join Date: Jun 2011
Posts: 34
Rep Power: 0 laresistance2 is on a distinguished road
How to create a zoom image with hover effect in CSS3.

Hello I would like to know how I can create a hover zoom image with a slowing effect without javascript.
Here is the CSS code http://jsfiddle.net/2YYcn/ but I want to know how I can add slow-motion effects in CSS.
thank you
laresistance2 is offline   Reply With Quote
Old Nov 19th, 2011, 8:24 PM   #2
FiRaS
Web Developer
 
FiRaS's Avatar
 
Join Date: Nov 2011
Location: Syria
Posts: 42
Rep Power: 0 FiRaS is on a distinguished road
Re: How to create a zoom image with hover effect in CSS3.

it's so easy to do... css will look like this :

a.rollover img {
    width: 100px;
    height: 100px;
}

a.rollover:hover > img {
    width: 200px;
    height: 200px;
    -moz-animation: emotion 2s; /* Firefox */}
@-moz-keyframes emotion
{
from {width: 100px;height:100px;}
to {width:200px;height:200px;}
}

p.s as u see this only works with firefox Internet explorer & opera still doesn't support css3 animation.
FiRaS is offline   Reply With Quote
Old Nov 20th, 2011, 1:36 PM   #3
laresistance2
Programmer
 
Join Date: Jun 2011
Posts: 34
Rep Power: 0 laresistance2 is on a distinguished road
Re: How to create a zoom image with hover effect in CSS3.

Hi FIRaS,
Thank you for answer.
For Opera and Explorer (9), is now possible to use, it's:
-o-animation: emotion 2s; // For Opera
-ms-animation: emotion 2s; // For Explorer 9
-webkit-animation: emotion 2s; // Chrome and Safari
-moz-animation: emotion 2s; // Firefox 
-khtml-animation: emotion 2s; //  Konqueror
-animation: emotion 2s; // When will the standard CSS3??

Last edited by laresistance2; Nov 20th, 2011 at 1:55 PM.
laresistance2 is offline   Reply With Quote
Old Nov 20th, 2011, 4:00 PM   #4
FiRaS
Web Developer
 
FiRaS's Avatar
 
Join Date: Nov 2011
Location: Syria
Posts: 42
Rep Power: 0 FiRaS is on a distinguished road
Re: How to create a zoom image with hover effect in CSS3.

u are welcome & thnx for the new detail..
FiRaS is offline   Reply With Quote
Old Sep 22nd, 2015, 3:45 AM   #5
bonave
Newbie
 
Join Date: Jun 2010
Posts: 6
Rep Power: 0 bonave is on a distinguished road
Re: How to create a zoom image with hover effect in CSS3.

More about.....CSS Image Hover Effects

Bonave
bonave is offline   Reply With Quote
Reply

Bookmarks

Tags
css, hover image, zoom

« Previous Thread in Forum | Next Thread in Forum »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
JQuery UI, slide effect, and bad story with image? Stasonix JavaScript and Client-Side Browser Scripting 0 Oct 10th, 2011 5:03 PM
Hovering over thumbnail to create image change gigman7 HTML / XHTML / CSS 5 Mar 25th, 2011 2:26 PM
change the image on hover RareDevil JavaScript and Client-Side Browser Scripting 6 Apr 18th, 2010 4:29 AM
Image distortion effect djm_2k1 Java 0 Oct 11th, 2005 1:21 PM
fedora USB create boot image script kdepfyffer Bash / Shell Scripting 2 May 25th, 2005 8:31 AM




DaniWeb IT Discussion Community
All times are GMT -5. The time now is 5:02 AM.

Powered by vBulletin® Version 3.7.0, Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
Copyright ©2007 DaniWeb® LLC