Summary Link Web Part Hover Image RRS feed

  • Question

  • When creating a site, I added a summary link web part to a page, added the Image URL and the Link URL and selected all of the correct options for how I wanted it to look. I then exported the web part and imported it into the web part gallery. I created a web part zone with an ID tag and styled it slightly. We trained the content managers to add this web part to this zone when they wanted this functionality. Now they want to add the hover image to this web part, everywhere they have added it. I am pretty sure I can use my ID tag but everything I have been trying is not working.

    Any help would be appreciated.


    Monday, December 3, 2012 3:58 PM


All replies

  • Hi HollieD,

    If you want to add the hover image to the web part, you need add some custom css style.

    .myButtonLink {

            display: block;

            width: 100px;

            height: 100px;

            background: url('/path/to/myImage.png') bottom;

            text-indent: -99999px;


    .myButtonLink:hover {



    You can refer to the following links





    Jack Gao
    TechNet Community Support

    • Marked as answer by Jack-Gao Friday, December 14, 2012 11:40 AM
    Wednesday, December 5, 2012 7:05 AM
  • This does not seem to work with the summary link web part. It places the image behind and lower than the current image. Any other suggestions?
    Thursday, January 10, 2013 4:00 PM
  • Thanks Jack for the great suggestion. I was able to get it to work using jQuery. The code is below for anyone who may need to do the same thing:

    function CustomSLHover() {  
      $('div#CustomSL .image').hover(function() {
        },function() {
     }// ^^function()


    Tuesday, January 15, 2013 8:55 PM