Hoover overlay

Hi hulldini,

Thanks for using my plugin. It definitely is possible to do what you’d like, though it is a bit involved. It also requires you have a pretty decent understanding of CSS.

Start by looking here: http://stackoverflow.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only-css

That will show you the basics in how to target an image element and the necessary CSS to get a black overlay (note: when they reference .image in their code, replace it with .portfolio-image in yours). I understand you want grey, but first thing is to get the behavior working, then you can worry about changing the colors.

To get the title to hide by default and then display on hover, you’ll have to target the .arconix-portfolio-title element.

.arconix-portfolio-title { visibility: hidden; }

.arconix-portfolio-grid li:hover .arconix-portfolio-title { visibility: visible; }

That should get the title hidden by default but displaying when you hover over the image. All that’s left is repositioning the title so that it shows up inside the image block. Something like this should get you close:

.arconix-portfolio-grid li { position: relative; }

.arconix-portfolio-title { position: absolute; top 15px; left 5px; }

Just a note — this is all code I wrote basically off the top of my head and I haven’t tested it. While I’m fairly certain the visibility and title positioning will work as we expect, I’m less sure of the rest of the code, so you may have to adjust it to get it working exactly how you want.

May I also suggest before you embark in any changes that you copy the arconix-portfolio.css file from my plugin’s directory to the root of your theme’s folder. That way my plugin will load your file in place of mine and your changes won’t be overwritten when I release updates to the plugin.