Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved How To Install And Use Tooltips From Walter Zorn On Pagelines


Question

Posted · Report post

Hi, I'm newbie and I'm trying to implement an onmouseover-effect on images (fade-in and fade-out) just like the HCC-sticker on the following page: http://www.hichert.c...erungen/berater

I would like to use the tooltips from walter zorn but didn't found any information about 1) if it works with pagelines and 2) how to implement it in pagelines.

Would be thankful for any help....

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

Thank you first of all for your quick response... ;-)

I find both solutions very good and its close to what I'm looking for.

I've tried the wordpress popup plugin but I don't get the onmouseovereffekt (fade-in and -out).

With the html-solution of batman I can get that effect but by mouse hover, the other pics and text underneath that picture always jumped down automatically.

Is there a way to fix that?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi again

Please try with


.photo{margin: 0;

padding: 0;}

.photo img

{border: none;}

.photo li

{list-style: none;

position: relative;}

a .zoom

{display: none;}

a:hover .zoom

{display: block;

position: absolute;

box-shadow:rgba(0,0,0,.5) 0 3px 6px;

-webkit-box-shadow:rgba(0,0,0,.5) 0 3px 6px;

-moz-box-shadow:rgba(0,0,0,.5) 0 3px 6px;}

To see if this is you need.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi batman,

perfect. its fixed... :-)

Thank you guys so much and have a nice day!

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Laura

From the link you've provided it looks like the popover is being activated by Js. I don't think you'll be able to achieve the same effect using the bootstrap popover we've installed as part of the shortcode section.

You can try this plugin though http://wordpress.org/extend/plugins/wordpress-popup/

Share this post


Link to post
Share on other sites

Posted · Report post

Hi laura

I find this to do zoom

First you copy this HTML to a draft post

<ul>

<li><a href="#"> <img src="https://lh6.googleus...s526/grande.jpg" alt="Zoom effect of Images and Pictures only using CSS-thumbnail" width="200" height="119" /> <img class="zoom" src="https://lh4.googleus...s200/chica.jpg" alt="Zoom effect of Images and Pictures only using CSS" width="526" height="314" /> </a></li>

</ul>

Please change after https://

in the first link blue for

lh6.googleusercontent.com/-DJVsUHaLado/UIb3pmRpNdI/AAAAAAAAMh4/DwFyDDreLlo/s526/grande.jpg

in the second link blue for

lh4.googleusercontent.com/-2gFhQdQTy5M/UIb3peb0PLI/AAAAAAAAMhw/0Z4O4Ky6kuc/s200/chica.jpg

To see my upload Picassa image

Then add in your CSS

.photo{margin: 0;padding: 0;}

.photo img{border: none;}

.photo li{

list-style: none;

position: relative;}

a .zoom{display: none;}

a:hover .zoom{display: block;

position: relative;

top: 0;

left: 0;

box-shadow:rgba(0,0,0,.5) 0 3px 6px;

-webkit-box-shadow:rgba(0,0,0,.5) 0 3px 6px;

-moz-box-shadow:rgba(0,0,0,.5) 0 3px 6px;}

Save the post as a draft and you can see preview, this work for me

Share this post


Link to post
Share on other sites

Posted · Report post

Upps I donĀ“t see the James B reply....

This is more better than mine

;)

Share this post


Link to post
Share on other sites