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.
How can we give Hover to an image using CSS(Cascading Style Sheet)?
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.
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
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).
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.
Hello Everyone!! I am Bhawana a SharePoint MVP and having about 10+ years of SharePoint experience as well as in .Net technologies. I have worked in all the versions of SharePoint from wss to Office 365. I have good exposure in Customization and Migration using Nintex, Metalogix tools. Now exploring more in SharePoint 2016 🙂 Hope here I can contribute and share my knowledge to the fullest. As I believe “There is no wealth like knowledge and no poverty like ignorance”