0

Is there any code to add to make the image a bit bigger in my SP webpart?

I just want it to have a little effect when mouse over. Here's my code

<p style="text-align: center;"> 
   <span class="ms-rteFontFace-12 ms-rteFontSize-4 ms-rteThemeForeColor-5-0">For New Mass Upload Request</span></p>
<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?List=33cf32a0-38b1-467f-8d57-01399a00338f&amp;Source=https%3a//sharepoint.com/sites/pub/mdmrequests/Lists/New%2520Mass%2520Upload%2520Requests/AllItems.aspx&amp;RootFolder=&amp;Web=cc3aea35-e893-45c1-92f4-b8c842103970">
      <img class="ms-rteImage-0 ms-rtePosition-4" alt="images.png" src="/sites/pub/mdmrequests/requesttypeselection/SiteAssets/SitePages/Home/images.png" style="width: 160px; height: 60px;"/></a>&#160;</p>
<p style="text-align: center;">&#160;</p>
1

2 Answers 2

0

If you are inside a SP Content Editor or wiki page, it might be little tricky since SP usually strips out custom css and scripts.

But you could use a Script Editor webpart for example with this kind of code:

  <style type="text/css">
    .myimage { width:100px; height:50px;}
    .myimage:hover {width:200px; height:100px;}
  </style>

  <a href="/sites/pub/mdmrequests/Lists/New%20Mass%20Upload%20Requests/Item/newifs.aspx?List=33cf32a0-38b1-467f-8d57-01399a00338f"> 
     <img  class="myimage" alt="images.png" src="/sites/pub/mdmrequests/requesttypeselection/SiteAssets/SitePages/Home/images.png" />
  </a>
0

I know I am I bit late but I'm sure there are still a couple daily visits to this thread so I would take pride in contributing.

One extremely easy way to do this is using CSS3's built in :hover tag.. For example:

.button {
    background-color: pink;
}

What this code above is saying is when the class is hovered over, the background color is turned pink. And the best part, its extremely easy to do and only took 3 lines of CSS code.

You can also add keyframe animations to it.. for example below:

@keyframes shake {

    0%{
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
    25%{
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }
    50%{
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
    75%{
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }
    100%{
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
}

.button:hover {
    animation: shake 1s infinite
}
.button {
    width: 300px;
    height: 50px;
}

What this code does is tell the shake animation to run when the button is hovered over.. as can be seen above. By the way I got this animation from button animations with code css if you would like to copy or view some open source hover animations. (All credit for the animation I listed above goes to them.) Frankly, these "hover" animations can easily be customized to your liking.

Anyways, hope that my answer helped. Good luck. :)

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.