SPECIAL OFFER: Only $69 for access to everything in OSTraining for 1 year! You save $75! 
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

additional info on hover

4 years 2 months ago - 4 years 2 months ago #117936 by Juc2
additional info on hover was created by Juc2
Hi all,

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.

4 years 2 months ago #117952 by Valentin
Replied by Valentin on topic additional info on hover
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

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 2 months ago #117953 by Juc2
Replied by Juc2 on topic additional info on hover

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.

4 years 2 months ago #118000 by Valentin
Replied by Valentin on topic additional info on hover
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

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 2 months ago #118032 by Juc2
Replied by Juc2 on topic additional info on hover

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

@ Valentin ok thanks. I will try the tutorial on my site and report back.

Thanks...

Please Log in to join the conversation.

4 years 2 months ago #118043 by Nick
Replied by Nick on topic additional info on hover
Thanks Juc2!

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 1 month ago #118187 by Juc2
Replied by Juc2 on topic additional info on hover
Yes this works fine thank you. Would this method also work if I want to swap the original image for another image (of the same size) on hover?

Thanks...

Please Log in to join the conversation.

4 years 1 month ago #118205 by Nick
Replied by Nick on topic additional info on hover
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

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 1 month ago #118213 by Juc2
Replied by Juc2 on topic additional info on hover

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.

4 years 1 month ago #118215 by Valentin
Replied by Valentin on topic additional info on hover
Hi Juc2,

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.

4 years 1 month ago #118324 by Juc2
Replied by Juc2 on topic additional info on hover
@ Valentin ok thanks...

Please Log in to join the conversation.

4 years 1 month ago #118331 by Valentin
Replied by Valentin on topic additional info on hover
You're welcome, Juc2!

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!