Use HTML to make Power BI images/icons more interesting

In developing Power BI reports, the report's design is a crucial component and adding features or customise the design is a great way to advance your reports. This article shows you how to use some HTML tags to add some cool and useful features to your report's images and icons:

1. Add an online image to your report

2. Change the image by hovering the mouse over it

3. Add hyperlinks to your images

4. Add movement to your images

5. Change the image colour by hovering the mouse over it

Live Power BI Report:

There are some HTML custom visuals for Power BI in appsource, and I use the HTML Content visual (by Daniel Marsh-Patrick) in this article and my reports. Download Link: https://appsource.microsoft.com/en-us/product/power-bi-visuals/WA200001930 More details: https://www.html-content.com/reference/data-roles.

There are two fields in the HTML Content Visual, Value and Granularity. The value field accepts either a column or measure that contains valid HTML. In order to add a measure to the HTML visual, place your HTML code between quotation marks, like this:

Measure = " <p> Test Paragraph for HTML visual </p> "

Click here to read my other blog post, "How to use Google Fonts or highlight text in Power BI?" with HTML visual.

Add an online image to your report:

Using the HTML visual, you can display online images on your report. To show an image on your report with HTML, you need to use the <img> tag (Images are not technically inserted into your report; images are linked to the report). The <img> tag creates a holding space for the referenced image, and it has two required attributes and does not have a closing tag.

Syntax: <img src="url" alt="alternatetext">

• Use the HTML src attribute to define the URL of the image

• Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed

• Use the HTML width and height attributes or the CSS width and height properties to define the size of the image

HTML:

<img src="https://powerapps.microsoft.com/images/application-logos/svg/powerbi.svg" alt="Power BI Logo" style="width:150px;height:160px;">

← Output

Change the image by hovering the mouse over it:

With the onmouseover and onmouseout attributes, you can add two different images, one for when the mouse is not over the image and one for when it is over the image. To add this function to your report, create a measure like the following and add the URLs of your images to variables _Image1 and _Image2:

Measure hovering = Var _Image1 = "https://powerapps.microsoft.com/images/application-logos/svg/powerbi.svg" Var _Image2 = "https://www.microsoft.com/en-us/microsoft-365/blog/uploads/prod/sites/2/2022/06/cropped-microsoft_logo_element.png" return "<img src='"& _Image1 & "' onmouseover= src='"& _Image2 & "' onmouseout= src='"& _Image1 & "' style='width:150px;height:160px;'/>"

Add hyperlinks to your images:

To use image as a link in HTML, use the <img> tag as well as the <a> tag with the href attribute. The <a> tag is for adding a link. These two tags allow you to add images to your report, add hyperlinks to them, and then use them as icons and menu items.

Before adding <a> tag and hyperlink to your image, make sure you turn on the Allow Opening URLs option on the visual → Content Formatting menu of the HTML content. for more details, click on this link: https://www.html-content.com/reference/properties#allow-opening-urls

Measure Image Hyperlink = Var _Image1 = "https://powerapps.microsoft.com/images/application-logos/svg/powerbi.svg" Var _Image2 = "https://www.microsoft.com/en-us/microsoft-365/blog/uploads/prod/sites/2/2022/06/cropped-microsoft_logo_element.png" Var _Hyperlink_URL = "https://powerbi.microsoft.com" return "<a href=" & _Hyperlink_URL &"> <img src='"& _Image1 & "' onmouseover= src='"& _Image2 & "' onmouseout= src='"& _Image1 & "' style='width:150px;height:160px;'/> </a>"

** How to link to an email address: <a href="mailto:someone@example.com">

Add movement to your images

Your Power BI report images can be animated using the Transform and @keyframes. The @keyframes rule specifies the animation code. The animation is created by gradually changing from one set of CSS styles to another. You can change the set of CSS styles during the animation many times. Specify when the style change will happen in percent or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, and 100% is when the animation is complete.

For more details about this rule, check this link: https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements. For more details about this property, check this link: https://www.w3schools.com/cssref/css3_pr_transform.asp Sample HTML: @keyframes spinning { from { transform: rotateZ(0deg) } to { transform: rotateZ(360deg) } } This code will rotate an element around the z-axis without deforming, and to run it while you hover over the image, the :hover selector needs to be used with the following properties to select this element when you put your mouse over the image. animation-name: this property specifies a name for the @keyframes animation. animation-duration: this property defines how long an animation should take to complete one cycle. animation-iteration-count: this property specifies the number of times an animation should be played. animation-timing-function: determines the speed curve of animation with the below items:

• ease: Default value. The animation has a slow start, then fast, before it ends slowly

• ease-in: The animation has a slow start

• ease-out: The animation has a slow end

• ease-in-out: The animation has both a slow start and a slow end

• linear: The animation has the same speed from beginning to end

Sample HTML: @keyframes spinning { from { transform: rotateZ(0deg) } to { transform: rotateZ(360deg) } } .spinhov:hover { animation-name: spinning; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: ease-in-out; } Sample Measures for Power BI:

RotateY = 
Var _Image1 = "https://powerapps.microsoft.com/images/application-logos/svg/powerbi.svg"
Return
"<style>
  @keyframes spin3D {
    from { transform: rotateY(0deg) }
    to { transform: rotateY(360deg) }
  }
  .spinhov3D:hover {
    animation-name: spin3D;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
  }
</style>

<img src='" & _Image1 & " ' class='spinhov3D'/>"

Change Scale = 
Var _Image1 = "https://powerapps.microsoft.com/images/application-logos/svg/powerbi.svg"
Return
"<style>
  @keyframes Scale1 {
    from {  transform: scale(0.8); }
    to {  transform: scale(1) }
  }
  .ScaleHov:hover {
    animation-name: Scale1;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    
  }
</style>

<img src='" & _Image1 & " ' class='ScaleHov'/ >"

Output: Hover your mouse over the images

Click here to download the Sample file with all measures and DAX codes.

Change the image colour by hovering the mouse over it

Using the filter property, you can apply graphical effects like blur or colour shift to your images on your Power BI report. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. for more details regarding this property, check this link: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Sample HTML:

img {

filter: grayscale(100%);

} Note: grayscale(%)Converts the image to grayscale. 0% (0) is the default and represents the original image.100% will make the image completely grey (used for black and white images). Sample Measures for Power BI:

By using this measure in Power BI HTML visual, you will see the Power BI logo, and when you hover over the logo, the image will become black and white.

Black and white = Var _Image1 = "https://powerapps.microsoft.com/images/application-logos/svg/powerbi.svg" Return "<style> img { transition: filter .5s ease-in-out; filter: grayscale(0%); } img:hover { filter: grayscale(100%);

blur(5px); } </style> <img src='" & _Image1 & "' >"

Download the PBIX Sample File (updated):

HTML PBI Images

.zip

Download ZIP • 1.59MB