Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
cwhiteside

Hayden: Title hover over grid gallery

Question

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!

Edited by Jeng

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 3

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

Edited by cwhiteside

Share this post


Link to post
  • 1

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.

alt text

– Petri / Vox Pop

Edited by voxpopagency
Initial Revision

Share this post


Link to post
  • 0

@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?

Share this post


Link to post
  • 0

@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;

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...