Comments on: Amazing Image Hover Effects with Webkit and CSS 3

By: dayFive: TwL CSS3 Hover States « SY Blog

dayFive: TwL CSS3 Hover States « SY Blog — Fri, 11 May 2012 13:13:46 +0000

[...] today I’ll be stealing content from http://dinolatoga.com/2009/09/18/amazing-imag-hover-effects-with-webkit-and-css/. who provide a relatively useful guide about the CSS [...]

By: maketrax

maketrax — Mon, 07 May 2012 20:45:36 +0000

oops – my example above doesn’t show the markup (it was interpreted by the comment tool) – here it is with square brackets replacing the open/close carets:

[div id="demo-3" class="demobox"]image here[/div]

[div class="details"]text here[/div]

By: maketrax

maketrax — Mon, 07 May 2012 20:42:20 +0000

Actually – demo examples 2 thru 5 are missing the class assignments for the divs – they won’t work by just copying to your environment. for example, in example 3:

image here

and

text here

By: beau dietl

beau dietl — Wed, 02 May 2012 20:37:23 +0000

beau dietl said something simliar a few weeks ago. I was watching a news report on t.v. that made the same points as the article above.

By: Srdjan

Srdjan — Thu, 26 Apr 2012 15:49:53 +0000

Hi,

I tried to put this into Joomla article, but it doesn’t work.
I put this into article:

#demo-3{position:relative;}
#demo-3 img{
opacity:1
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#demo-3 .details{
position:absolute;
top:0;
left:0;
opacity: 0;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

#demo-3 .details:hover{
opacity: .9;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

Transformers
More than meets the eye

Can you please tell me where is the mistake?

By: easy claims process

easy claims process — Thu, 19 Apr 2012 14:33:24 +0000

“kqbL6_MuC0dzc-1328657650387 Thanks for that awesome posting. It saved MUCH time :-)

By: Rex

Rex — Wed, 18 Apr 2012 17:30:56 +0000

This helped me and using it I made a simple snippet to show the author info using the CSS3 hover effects
http://webstutorial.com/css3-image-hover-effects/css3

By: r4

r4 — Thu, 12 Apr 2012 08:53:02 +0000

nice post , learnt much from you thanks

By: 7个使用jQuery及其CSS实现的悬浮特效 | 莲娜用户体验研究日志 Lyna UED

7个使用jQuery及其CSS实现的悬浮特效 | 莲娜用户体验研究日志 Lyna UED — Sat, 24 Mar 2012 09:48:17 +0000

[...] Amazing Image Hover Effects with Webkit and CSS 3 [...]

By: circleb

circleb — Thu, 22 Mar 2012 14:01:34 +0000

If you use these CSS rules it will work in nearly all browsers…

-webkit-transition: all 250ms ease-in;
-moz-transition: all 250ms ease-in;
-ms-transition: all 250ms ease-in;
-o-transition: all 250ms ease-in;
transition: all 250ms ease-in;