Need help about wordpress plugin

by 8 replies
10
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
#website design #plugin #wordpress
  • Is this what you are talking about?

    The Hover Image WP plugin
    WordPress › Hover Image « WordPress Plugins
    (not affiliate link)
    • [ 1 ] Thanks
    • [1] reply
    • Hmm, I've read its instruction, and maybe its not the plugin I'm looking for.

      Thank you Matt

      P/S : I've added the image for better description

  • 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.
    • [ 1 ] Thanks
  • 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; }
    <a> <div><img src="" /></div> </a>

    : for example, http : // gooogle . com
    : 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 : , then the image ( , and when I click on it, it open the web (

    Thank you so much
    • [1] reply
    • 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
      • [ 1 ] Thanks
  • Also add a class to the <a href so that it does it for this particular link only.
    • [ 1 ] Thanks
  • Thank you guys

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

    into my post, it was automatically changed to :
    href="http://google.com">your text link
    <div><img src="https://google.com/intl/vi_ALL/images/logos/images_logo_lg.gif" alt="" /></div>
  • 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
Join the discussion

Next Topics on Trending Feed

  • 10

    Need help about wordpress plugin

    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 ).