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

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);
}
|improve this answer|||||
  • 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. – Angelie descalsota Jan 30 '17 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> – Angelie descalsota Jan 30 '17 at 11:25
  • Hi! code above doesnt seem to be accepted by my SP :( – Angelie descalsota Feb 10 '17 at 3:52
  • whats the issue that you are facing? – Subrato Kumar Pati Feb 13 '17 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. – Angelie descalsota Feb 13 '17 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.

|improve this answer|||||
  • 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 – Angelie descalsota Jan 30 '17 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> – Angelie descalsota Jan 30 '17 at 10:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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