additional info on hover
- Juc2
- Topic Author
- Away
- Posts: 147
- Thank you received: 0
On this page www.ostraining.com/about/us/ (for example) there is additional info when you hover on the image. I guess it is using jQuery and mouseover. Is there any tutorial for how to do this or if not can anyone show me how to do it (eg on codepen.io )
Thanks...
Please Log in to join the conversation.
- Valentin
- Offline
- Posts: 9893
- Thank you received: 385
That effect is made thanks to CSS. I can create a tutorial for you to explain how to do it.
What do you think?
Kind regards,
Valentín
Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
Please Log in to join the conversation.
- Juc2
- Topic Author
- Away
- Posts: 147
- Thank you received: 0
Valentin wrote: Hi Juc2,
That effect is made thanks to CSS. I can create a tutorial for you to explain how to do it.
What do you think?
Kind regards,
Valentín
@Valentin yes please, thank you...
Please Log in to join the conversation.
- Valentin
- Offline
- Posts: 9893
- Thank you received: 385
The tutorial is ready: www.ostraining.com/blog/coding/transition-and-transform-css3/
Let us know if we can help you in something else
Kind regards,
Valentín
Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
Please Log in to join the conversation.
- Juc2
- Topic Author
- Away
- Posts: 147
- Thank you received: 0
@ Valentin ok thanks. I will try the tutorial on my site and report back.Valentin wrote: Hi Juc2,
The tutorial is ready: www.ostraining.com/blog/coding/transition-and-transform-css3/
Let us know if we can help you in something else
Kind regards,
Valentín
Thanks...
Please Log in to join the conversation.
- Nick
-
- Offline
- Posts: 23621
- Thank you received: 695
Kind regards,
Nick
Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
Please Log in to join the conversation.
- Juc2
- Topic Author
- Away
- Posts: 147
- Thank you received: 0
Thanks...
Please Log in to join the conversation.
- Nick
-
- Offline
- Posts: 23621
- Thank you received: 695
Great! We're glad it works for you!
Yes, the same method would work. But, you'd have to adjust the HTML and CSS slightly since it's no longer for a set caption, but rather the whole image is being switched.
Kind regards,
Nick
Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
Please Log in to join the conversation.
- Juc2
- Topic Author
- Away
- Posts: 147
- Thank you received: 0
Nick wrote: Hi Juc2,
Great! We're glad it works for you!
Yes, the same method would work. But, you'd have to adjust the HTML and CSS slightly since it's no longer for a set caption, but rather the whole image is being switched.
Kind regards,
Nick
@ Nick yes it works, thanks! Is this CSS3, I mean are there any browser compatibility issues?
Please Log in to join the conversation.
- Valentin
- Offline
- Posts: 9893
- Thank you received: 385
Supports very good the modern browsers.
For more details, please refer to these pages:
caniuse.com/#feat=transforms2d
caniuse.com/#feat=css-transitions
Let us know if you need something else
Kind regards,
Valentín
Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
Please Log in to join the conversation.
- Juc2
- Topic Author
- Away
- Posts: 147
- Thank you received: 0
Please Log in to join the conversation.
- Valentin
- Offline
- Posts: 9893
- Thank you received: 385
Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
Please Log in to join the conversation.