Adding text over image in portfolio and removing buttons

takamineman · December 2015

I'd like to add a title over top of my portfolio images on this page http://www.basiccon.org/speakers-and-artists/

I was hoping to get it to look similar to this: http://ksdesigning.com/themes/calm/portfolio/

I also want to remove the magnify and link button, but still keep it so when someone clicks on the image that it links to the portfolio item with full description like it does now.

Albert · December 2015

Hi,

1) We are sorry but it is not possible to add text on portfolio items because this requires files customization.

2) To remove hover effect from portfolio items, you supposed to use below css:

.image_frame .image_wrapper .mask::after { display: none !important; }
.image_frame .image_wrapper img:not(.ls-l) { top: 0 !important; }
.image_frame .image_wrapper .image_links { display: none !important; }

takamineman · December 2015

Would there be a way to achieve a similar look by creating an image with text over it in 2 columns and then have them link to another page where you put the full description info you would normally have for a portfolio item?

If so, how would I go about that?

Albert · December 2015

This is not possible unfortunately because it requires customization. You want achieve that look with custom css only.

takamineman · December 2015

For anyone else interested, I was able to achieve a look similar to this by using the zoom box shortcode and then linking the image to another page with the full description. You'll need to make sure that your page is set to full width and no margins.

The one problem I'm still having though is that if the text that comes up when you hover over needs to go down to a second line then the lines of text overlap each other. See what it looks like for Havilah Cunnington on this page: http://www.basiccon.org/speakers-and-artists/

Any thoughts on how I could fix that?

Albert · December 2015

@takamineman That's because of line-height which is much smaller than your font size. If you want, you can increase this line-height with below css:

h6 { line-height: 40px !important; }

Anyway, we are very happy that you sorted this with one of our items

takamineman · December 2015

Great. Thanks for the help!

Albert · December 2015

You're welcome

Adding text over image in portfolio and removing buttons

Comments