Hayden: Title hover over grid gallery

Hi,

I am looking to create an effect similar to on the following website:

http://www.scoutstud.io/

My website uses the Hayden template and I am trying to create the effect on the following page:

www.chriswhiteside.com/home

Can anyone help with the CSS required? (I am new to this)

Thanks in advance!

I pretty much managed it using the following CSS:

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
 display: block; 
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 padding-top: 12em;
 -webkit-transition: all 300ms ease-out; 
 -moz-transition: all 300ms ease-out; 
 -o-transition: all 300ms ease-out; 
 -ms-transition: all 300ms ease-out; 
 transition: all 300ms ease-out; }

.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
 background: rgba(240,240,240,0.8); }

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
 font-family: sans-serif, futura pt ;
 font-size: 14px;
 font-style: bold;
 text-transform: uppercase;
 letter-spacing:4px;
 color: #fff;
 opacity: 0; }

.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
 font-family: sans-serif, futura pt;
 font-size: 14px;
 font-style: bold;
 text-transform: uppercase;
 letter-spacing:4px;
 color: #000;
 opacity: 1; } 

However this CSS does not seem to work on the font which is not changing to 'futura pt' or to 'bold' as it should.

The click-though link of the images is also no longer working, how can I fix this?

www.chriswhiteside.com/home

I posted an answer to a similar question here. I provided code for changing the opacity of gallery grid images upon hover while also displaying the image title centered and at full opacity on hover.

To see a sample of my code in use, check out my site.

Just used the same and modified it to work with my galleries, but I can't get clickthrough URLs to work either. Anyone have thoughts on this?

I've developed a commercial plugin that adds grid gallery block titles in front of the image with smooth hover effects.

So if a result like the image below is what you're after, check out the plugin here.

– Petri / Vox Pop

@HeartAndDash: you are so awesome for posting the code. Thank you! I'm seeing a lot of comments from people that the titles are no longer appearing! @emca closed the thread where you posted your fabulous answer, but something's not right with the code (per a bunch of comments) and if you can't post a reply there, maybe here?

@despair_ribs: To get the clickthrough link to work again, add the following line of code to the very end of the who code sequence within the last set of brackets.

pointer-events: none;