How to add pop up picture when mousing over an icon?

• 

  jasonke123 · Member · May 4, 2016 at 9:23 pm

  • Copy link
  • Add topic to favorites

  Hi, I am trying to add a pop up picture to an social media icon (when the mouse moves over the icon, a small picture will pop up in a box beside the mouse). Here is the link of my website (https://jasonke.com/); The social media icon I added is under “Follow me on social media” module. The way I used is to type in the CSS and HTML code to the Text Widget. I am not sure whether it is possible to add a pop up picture in this way?

  Here is the effect I want to have.(https://jasonkedotcom.files.wordpress.com/2016/05/screen-shot-2016-05-03-at-14-39-431.jpg) When the mouse moves over the green icon, a box with a small picture inside pops up.

  Thank you.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · May 4, 2016 at 10:45 pm

  • Copy link

  No, this isn’t something that could be done in the widget. This is a sample of some CSS that could be used. Not having seen the image (size, etc.) this is just a rough general take on it. You would replace URL_OF_IMAGE between the quote marks with the URL of your image.

  #text-5 a:hover:after {
      content: url("URL_OF_IMAGE");
      display: block;
      position: relative;
      right: -50px;
      top: -50px;
  }

• 

  jasonke123 · Member · May 5, 2016 at 12:33 am

  • Copy link

  Thank you so much for your help; The problem is resolved.

  But I still got a dumb question: I just copy your code into the CSS module in the customiser and if I want to add other effects using CSS, how will the system distinguish which one should be applied to? (Say if I have another icon or text with hyperlink, I add a similar pop up effect on that.)

  Do I need to just type in the similar code after the previous one?

  Thank you for your time.

• 

  thesacredpath · Member · May 5, 2016 at 1:35 am

  • Copy link

  If you are going to add additional linked images to that text widget and want some or all of them to have the same popup image on hover, then you are going to need to assign CSS classes to the link code. Using your existing icon as an example, this would be what you would do to the code in the text widget

  <a class="my-social-1" href="https://jasonkedotcom.files.wordpress.com/2016/05/qrcode_for_gh_3529896e4c5b_258.jpg">
  <img width="35" height="35" title="wechat" alt="wechat" src="https://jasonkedotcom.files.wordpress.com/2016/04/1461843335_wechat.png">
  </a>

  and this would be what the CSS would look like.

  #text-5 a.my-social-1:hover::after {
      content: url("https://jasonkedotcom.files.wordpress.com/2016/05/qrcode_for_gh_3529896e4c5b_258.jpg");
      display: block;
      position: relative;
      right: -50px;
      top: -50px;
  }

  You can of course make the CSS classes pretty much anything you would like, but to keep from possibly conflicting with existing CSS classes, I would suggest “my-social-1, my-social-2, etc.

  You can use the above as a guide for creating the others and pretty much copy/paste, change the CSS class and the URL in the content declaration.