Dropdown from Picture in SharePoint

Question

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?

Answer 1

Hi @Ronni DeLay ,

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>  

---

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.