question

RonniDeLay-4527 avatar image
0 Votes"
RonniDeLay-4527 asked MichaelHan-MSFT commented

Dropdown from Picture in SharePoint

I would like to add a dropdown directly from a picture. For instance, if you hover over a picture, a dropdown will be visible to take you to different pages. Is this possible in SharePoint?

office-sharepoint-server-developmentoffice-sharepoint-server-customization
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @RonniDeLay-4527,

Is there anything update? If my reply helps you, you could accept it as answer. It would be helpful to others who have similar issues in the future.

0 Votes 0 ·

1 Answer

MichaelHan-MSFT avatar image
0 Votes"
MichaelHan-MSFT answered

Hi @RonniDeLay-4527,

You could use CSS to achieve drop down on picture hover. Below is my sample for you:

 <style>
    
 .dropdown {
   position: relative;
   display: inline-block;
 }
    
 .dropdown-content {
   display: none;
   position: absolute;
   background-color: #f1f1f1;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
 }
    
 .dropdown-content a {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
 }
    
 .dropdown-content a:hover {background-color: #ddd;}
    
 .dropdown:hover .dropdown-content {display: block;}
    
 </style>
    
     
 <div class="dropdown">
    <img src="/SiteAssets/test.png" alt="picture"/>
    <div class="dropdown-content">
      <a href="/SitePages/page1.aspx">Link 1</a>
      <a href="https://www.google.com/">Link 2</a>
      <a href="#">Link 3</a>
    </div>
 </div>


84309-test.gif



If an Answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



test.gif (49.3 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.