MyBB Community Forums - How to make this css effect ?

I want to make this effect available all of my thumbnails.

(example: http://www.mybb.biz/konu-procan-buton-set.html )

I'm using postimage.org

+i googled it before http://css-tricks.com/snippets/css/scale...ransition/
i found this. but didnt worked.

Just bind the image you want the effect with a class. Like:

<img src="http://mysite.com/mypic.jpg" />

will be (adding 'imgeffect' class)

<img src="http://mysite.com/mypic.jpg" class="imgeffect" />

Now add this line in your global.css:

img.imgeffect:hover {
-webkit-transform:scale(1.2) rotate(2deg);
}

(2012-12-09, 09:58 PM)effone Wrote: [ -> ]Just bind the image you want the effect with a class. Like:
<img src="http://mysite.com/mypic.jpg" />
will be (adding 'imgeffect' class)
<img src="http://mysite.com/mypic.jpg" class="imgeffect" />
Now add this line in your global.css:
img.ingeffect:hover {
-webkit-transform:scale(1.2) rotate(2deg);
}

Nice, I thought this would have only been possible with JavaScript. CSS is getting better and better.

But it wont be available for older post. Am i wrong?

(2012-12-10, 02:15 PM)tarkin Wrote: [ -> ]But it wont be available for older post. Am i wrong?

It would work for any image with class="imgeffect". And if you remove "img" from the CSS, it'll work on any element with class="imgeffect".

Also should be this:

Quote:img.imgeffect:hover {
-webkit-transform:scale(1.2) rotate(2deg);
}

imgeffect was misspelled. xD

I tried to do something.
But it didn't worked. Could you be more simple?
(my english is bad)

(2012-12-10, 07:03 PM)Eric J. Wrote: [ -> ]imgeffect was misspelled. xD

Sorry, finger slipped one key as I typed. :p Post corrected.

tarkin, it is a working code. I've tested it right now for double confirmation.

That's awful ...

(2012-12-09, 11:25 PM)ESR360 Wrote: [ -> ]
(2012-12-09, 09:58 PM)effone Wrote: [ -> ]Just bind the image you want the effect with a class. Like:
<img src="http://mysite.com/mypic.jpg" />
will be (adding 'imgeffect' class)
<img src="http://mysite.com/mypic.jpg" class="imgeffect" />
Now add this line in your global.css:
img.ingeffect:hover {
-webkit-transform:scale(1.2) rotate(2deg);
}
Nice, I thought this would have only been possible with JavaScript. CSS is getting better and better.

You were unaware of CSS transitions all this time? They've been stable for more then a year now, maybe two.

(2012-12-11, 08:49 PM)Jason L. Wrote: [ -> ]
(2012-12-09, 11:25 PM)ESR360 Wrote: [ -> ]
(2012-12-09, 09:58 PM)effone Wrote: [ -> ]Just bind the image you want the effect with a class. Like:
<img src="http://mysite.com/mypic.jpg" />
will be (adding 'imgeffect' class)
<img src="http://mysite.com/mypic.jpg" class="imgeffect" />
Now add this line in your global.css:
img.ingeffect:hover {
-webkit-transform:scale(1.2) rotate(2deg);
}
Nice, I thought this would have only been possible with JavaScript. CSS is getting better and better.
You were unaware of CSS transitions all this time? They've been stable for more then a year now, maybe two.

Yep, I read up on them after seeing this thread. I'd never come across them before. You should know from my designs that I am stuck about 2 years into the past :p