1

I have a webpart in my SharePoint sub site. This webpart contains an image and that image is linked to another site.

Since the image looks so plain, I decided to make a little make over. I want to make the image a bit bigger by using hover.

Can someone help me on this?

Here's my code in SharePoint:

<a>
<img width="190" height="55" class="ms-rteImage-0 ms-rtePosition-4" alt="images.png" src="/sites/pub/SitePages/Home/images.png"/>
</a>

2 Answers 2

2

Add a custom class name for the element and assign the styles for the same.

<img width="190" height="55" class="item ms-rteImage-0 ms-rtePosition-4" alt="images.png" src="/sites/pub/SitePages/Home/images.png"/>


.item img 
{
 max-width: 100%;
 -moz-transition: all 0.3s;
 -webkit-transition: all 0.3s;
 transition: all 0.3s;
 width:190px;
 height:55px;
}
.item:hover img 
{
 -moz-transform: scale(1.3);
 -webkit-transform: scale(1.3);
 transform: scale(1.3);
}
5
  • Hi, I appreciate your reply. i am having a hard time embedding the code. Beliw is my current code in the SP site - auto generated.
    – AG Dew
    Commented Jan 30, 2017 at 11:25
  • <a> <h1 style="text-align: center;"> <span style="font-size: 15pt;">For New Mass Upload Request</span></h1> <p style="text-align: center;">Please click the button below.</p> <p style="text-align: center;"> <a href="/sites/pub/mdmrequests/Lists/New%20Mass%20Upload%20Req‌​uests/Item/newifs.as‌​px> <img width="190" height="55" class="ms-rteImage-0 ms-rtePosition-4" alt="images.png" src="/sites/pub/mdmrequests/requesttypeselection/SiteAssets/‌​SitePages/Home/image‌​s.png"/></a>&#160;</‌​p> <p style="text-align: center;">&#160;</p> </a>
    – AG Dew
    Commented Jan 30, 2017 at 11:25
  • Hi! code above doesnt seem to be accepted by my SP :(
    – AG Dew
    Commented Feb 10, 2017 at 3:52
  • whats the issue that you are facing? Commented Feb 13, 2017 at 6:01
  • I added the code as well as the class but it doesnt seem to work. Above is my whole code in the SP Site.
    – AG Dew
    Commented Feb 13, 2017 at 9:00
0

Change your image tag as below:

<img width="190" height="55" class="thumbnail ms-rteImage-0 ms-rtePosition-4" alt="images.png" src="/sites/pub/SitePages/Home/images.png"/>

And add following css to page:

.thumbnail:hover {
    position:relative;
    top:-25px;
    left:-35px;
    width:500px;
    height:auto;
    display:block;
    z-index:999;
}

This will enable you to enlarge image on hower. Click here to view the demo.

2
  • Hi, I appreciate your response on this but i cant seem to make the code work. This is my code in SP - auto generated by the sharepoint site
    – AG Dew
    Commented Jan 30, 2017 at 10:30
  • <a> <h1 style="text-align: center;"> <span style="font-size: 15pt;">For New Mass Upload Request</span></h1> <p style="text-align: center;">Please click the button below.</p> <p style="text-align: center;"> <a href="/sites/pub/mdmrequests/Lists/New%20Mass%20Upload%20Requests/Item/newifs.aspx> <img width="190" height="55" class="ms-rteImage-0 ms-rtePosition-4" alt="images.png" src="/sites/pub/mdmrequests/requesttypeselection/SiteAssets/SitePages/Home/images.png"/></a>&#160;</p> <p style="text-align: center;">&#160;</p> </a>
    – AG Dew
    Commented Jan 30, 2017 at 10:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.