Add commas when hovering on Portfolio item


#1

I’m trying to add commas for the text when you hover on a Portfolio item. If you scroll down to Case Studies and hover on an item, you’ll see that it is a messy text block. The text shown on the hover state is pulled from categories that I selected via a Portfolio Categories menu on the case studio page. Here is a screenshot: Hover State

Any thoughts/help?


#2

Can you not add the commas in the categories page itself?


#3

Clever idea! I guess I could do that. However, if I apply a comma to all of the categories then the last item in the list in the hover state would have a comma, which would look kind of sloppy.


#4

Okay, I am a bit confused here.
Are you talking about adding comma to the Category title or category description??


#5

Hi Danish. I ended up editing all of the category titles and added a period (.) at the end of each. I think it looks better this way. See this screenshot.


#6

Do you know how to remove the arrow and plus symbol icons from the thumbnail in the hover state? I simply want the category info to appear.


#7

Okay great but I am not sure if that is the best solution for this problem.


#8

To hide the icons, please add the below CSS to Jupiter -> Theme Options -> Advanced -> Custom CSS

.mk-portfolio-item .featured-image .hover-icon{
	display: none;
}

Please let me know if the above CSS does not work. In case, it does not work, please share your page URL with me and I will provide new CSS.

Thanks.


#9

Hi Danish – It doesn’t appear to have worked. My website is www.turntoamplify.com


#10

In that case, please use this

.mk-portfolio-item .featured-image .hover-icon{
	display: none !important;
}

#11

This worked, thanks Danish!


#12

You’re welcome :slightly_smiling_face: