Image hover effects css using script editor web part in SharePoint online

Here in this SharePoint Tutorial, We will discuss What is Hover and how we can give Hover to a simple image using CSS(Cascading Style Sheet) in SharePoint Online, SharePoint 2016, SharePoint 2013 and also SharePoint 2010. Basically, we were trying to retrieve list items using jsom and displaying in HTML div tag [jsom SharePoint 2013 examples: Display List Items in Div using JSOM]. Here to give hover effect we have added the CSS for the images.

Before using an image Hover by using CSS, Just create a simple List in your current SharePoint Site. In that SharePoint List, Create an image or picture column which should be a “Hyperlink or Picture” Column. After creating all column, Add some item into that SharePoint List and in that “Hyperlink or Picture” column, Upload some picture or image by giving the URL.

In the same way, I have created a List in my current SharePoint Site. Then I have created a Picture column as “Hyperlink or Picture”. Then I have uploaded some pictures into that “Hyperlink or Picture” column of SharePoint Site.

After adding all the items in SharePoint List, Just create a JS(JavaScript) File for retrieving the List column(“Hyperlink or Picture”) from the SharePoint List.

How can we give Hover to an image using CSS(Cascading Style Sheet)?

Step-1:-

Here in this screenshot, The below code is representing for retrieving the picture or image column from the SharePoint List. So here at first, I have taken a Variable as “imgurl” and there I have retrieved the picture column from that SharePoint List. The Code for retrieving the Picture Column as given below-

var imgurl = oListItem.get_item(‘BlogPic’).get_url();

After retrieving the “Hyperlink or Picture” column from the SharePoint List, I have given the path of image URL within the “table”. Then after I have added a image class for designing the image part. Here in this below code, I have added an image class as “<img class=\’Blog\’>”. By using this class, I have given hover to the image by using CSS code.

how to give hover to an image
how to give hover to an image

Step-2:-

In this screenshot, You can see that I have used the class as “Blog” which was given in the JS(JavaScript) code. As I have given a class, So in the CSS Code, I have taken the class as “.”(.Blog) where the “.” represents as class and “Blog” represents as class name. So for giving the Hover to an Image, You can write the below code inside a script editor web part in the same page where the image presents.

img.Blog:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

how to change hover image in css
how to change hover image in css

Step-3:-

Here like this below screenshot, If you want to take the arrow mark near to image, Then you can see the effect of image Hover in the image background. So in this way, we can give the hover to an image by using CSS(Cascading Style Sheet).

css change background image on hover
css change background image on hover

Conclusion:-

Hence in this SharePoint Tutorial, We discussed What is Hover and how to give Hover to a simple image using CSS(Cascading Style Sheet) in SharePoint Online, SharePoint 2016, SharePoint 2013 and also SharePoint 2010 which are mentioned in above steps.

  • Great explanation!

    Do you know how to change the hover text in SharePoint 2013 survey questions? For Checkboxes?

  • >