10 {{ upvoteCount | shortNum }}
10 {{ upvoteCount | shortNum }}

Need help about wordpress plugin

by DK.Paul
8 replies
  • WEB DESIGN
    • |
Hi everyone ,

I want to find a plugin, i.e. when I move the mouse at the link ( don't click the link ), a previewed image appears ( maybe the image of the website of the link, or my own image ).

Or I can do this with any html/css code, please share it here !!!

Thank you everyone
#plugin #wordpress
  • Profile picture of the author Matt Bard
    Is this what you are talking about?

    The Hover Image WP plugin
    WordPress › Hover Image « WordPress Plugins
    (not affiliate link)
    {{ DiscussionBoard.errors[7776048].message }}
  • Profile picture of the author Patrick
    The simplest HTML/CSS, not exact but will do it..

    Code:
    <a>Some Link <div><img src="/you/image" /></div> </a>
    Code:
    a>div { display: none; } a:hover>div { display: block; }
    Also you have to add positioning so that the image stays on top of the link.
    Signature
    Freelance WordPress Developer | Free WordPress Themes | Free WordPress Plugins | Free WordPress Support
    {{ DiscussionBoard.errors[7776566].message }}
  • Profile picture of the author DK.Paul
    Thank you for your help

    Could you please show me exactly how to do it ? ( I'm not a coder guy )

    How to use the code below :
    a>div { display: none; } a:hover>div { display: block; }

    And,for the code below :
    <a>Some Link <div><img src="/you/image" /></div> </a>

    Some link : for example, http : // gooogle . com
    /you/image : for example, https : // google . com/intl/vi_ALL/images/logos/images_logo_lg.gif , is that correct ?

    So where can I put the anchor text ? I means, when I stop the mouse at an anchor text ( for example : Click Here , then the image ( /you/image)appear , and when I click on it, it open the web ( Some link )

    Thank you so much
    Signature
    {{ DiscussionBoard.errors[7776918].message }}
    • Profile picture of the author Leonidess
      Originally Posted by DK.Paul View Post

      Thank you for your help

      Could you please show me exactly how to do it ? ( I'm not a coder guy )

      How to use the code below :
      a>div { display: none; } a:hover>div { display: block; }

      And,for the code below :
      <a>Some Link <div><img src="/you/image" /></div> </a>

      Some link : for example, http : // gooogle . com
      /you/image : for example, https : // google . com/intl/vi_ALL/images/logos/images_logo_lg.gif , is that correct ?

      So where can I put the anchor text ? I means, when I stop the mouse at an anchor text ( for example : Click Here , then the image ( /you/image)appear , and when I click on it, it open the web ( Some link )

      Thank you so much
      Just add the code in the text. For example log in to your wordpress admin panel select the post you would like to edit and click on the HTML view. Then just add the following code inside the text:

      Your text inside the post and <a href="http://google.com">your text link <div><img src="https://google.com/intl/vi_ALL/images/logos/images_logo_lg.gif" /></div> </a>

      You should add the following code inside your style.css file:

      a>div { display: none; } a:hover>div { display: block; }

      Hope this helps
      {{ DiscussionBoard.errors[7777449].message }}
  • Profile picture of the author Patrick
    Also add a class to the <a href so that it does it for this particular link only.
    Signature
    Freelance WordPress Developer | Free WordPress Themes | Free WordPress Plugins | Free WordPress Support
    {{ DiscussionBoard.errors[7779723].message }}
  • Profile picture of the author DK.Paul
    Thank you guys

    But when I copy :
    <a href="http://google.com">your text link <div><img src="https://google.com/intl/vi_ALL/images/logos/images_logo_lg.gif" /></div> </a>

    into my post, it was automatically changed to :
    <a href="http://google.com">your text link</a>
    <div><img src="https://google.com/intl/vi_ALL/images/logos/images_logo_lg.gif" alt="" /></div>
    Signature
    {{ DiscussionBoard.errors[7780391].message }}
  • Profile picture of the author Leonidess
    Just a quick update. Try using the following code.

    The CSS code:
    .mouseover { position:absolute; width:200px; height:200px; top:5px; left:5px; display:none; } .link { position:relative; } .link:hover .mouseover { display:block; } Then, in HTML:
    <a href="#" class="link">Link <div style="background:url('<URL HERE>')" class="mouseover"></div> </a>

    Type your image URL here. For example:

    <div style="background:url('https://google.com/intl/vi_ALL/images/logos/images_logo_lg.gif')" class="mouseover"></div>

    Best Regards
    {{ DiscussionBoard.errors[7826314].message }}

Trending Topics