Excerpts overlay don't show on portfolio projects with no image

[satori]

Hey Jonas,

could you please help me out here – I’m not sure I understood 100% what you are trying to do. Correct me if I’m wrong – you want the portfolio grid items which have featured images to display a title on a coloured background on mouse hover. And then, you also want the text-only grid tiles to not display anything on mouse hover? Or display just a coloured background? It’s very probable that there’s either a back-end or a code solution to it, just need to be sure exactly what is needed.

Sincerely,
Andrii / Satori Studio

[skafte]

Hi Andrii,

Thanks for your quick reply!

I am super excited to hear that you think there might be a way to do this, and my apologies for not making the previous explanation too clear.

I’ve photoshopped three examples, which might help make more sense of it:

Example 1: No hover on site, but titles showing on all tiles with a featured image.
https://www.dropbox.com/s/3m1fpjj4il6a2zx/Example1_NoHover.jpg

Example 2: Hover on text tile ‘Medvirk’ – NB. the only thing that changes is the background colour.
https://www.dropbox.com/s/m65i0yqdxd96bwd/Example2_HoverOnMedvirk.jpg

Example 3: Hover on the large featured image tile – NB. The overlay background colour changes.
https://www.dropbox.com/s/xbkpc467qp4row3/Example3_HoverOnFeaturedImage.jpg

In my previous post I wanted the overlay on tiles with a featured image to completely disappear on hover, but after doing the photoshopped examples, I think it might be better to just make the background of the overlay go green as shown in the examples above.

So, just to clarify in regards to your questions:

“you want the portfolio grid items which have featured images to display a title on a coloured background on mouse hover”
— Yes, but slightly different; display titles when not hovered (‘always’), but then make the background overlay change colour when hovered.

“And then, you also want the text-only grid tiles to not display anything on mouse hover? Or display just a coloured background?”
— Yes, I would like to have only the background colour changing, whilst still showing the title. As it is now, except now it’s achieved by just copy-pasting the title into the excerpt so that it looks as if it’s only the background changing colour – which it isn’t…

Hope that makes more sense? If not, then please let me know and I’ll elaborate.

Thanks a lot! Having this change done would really do it for me!

Jonas

[satori]

Hey Jonas,

there’s a special class added to masonry elements that have featured images, so here’s what you can try out:

.iso-masonry .has-post-thumbnail .image-post-overlay { top: 0; background-color: #0F0; margin-left: 0; }
.iso-masonry .has-post-thumbnail .project-hover { display: none !important; }

Please let me know if that’s closer to what you’re trying to achieve.

Best,
Andrii / Satori Studio

[skafte]

Thanks Andrii!

I’m now a little bit closer to get it to look like as on the photoshopped images I shared with you earlier on. However, I’m still not quite there; the titles aren’t showing when not hovered, the overlay (+title) is placed differently and similarly to on the text-based tiles (I want them as original, in the bottom, but only on those with a featured image) and finally, I can’t get the white background overlay to work (when not hovered). See for yourself: http://theme.alternativet.dk/

Please would you mind having a look at my child-theme CSS styles in case you can see what I’ve done wrong? Here it is: http://theme.alternativet.dk/wp-content/themes/Ikebana-child/style.css

I think it might be because the codes you gave me collide with the other changes I’ve made; (.iso-masonry .has-post-thumbnail .image-post-overlay) and (.iso-masonry .has-post-thumbnail .project-hover) VS (.iso-masonry .image-post-overlay.), but I’m not really sure, and if that’s the case, then I have no idea of how to get around that…?

Again, thanks! Your help is so very much appreciated!

Best,

Jonas

[satori]

Hey Jonas,

please try this instead of the CSS I provided earlier:

.iso-masonry .has-post-thumbnail .image-post-overlay {
  background-color: #FFF;
  margin-left: 0;
  top: auto !important;
  display: block !important;
}
.iso-masonry .has-post-thumbnail .image-post-overlay:hover {
  background-color: #0F0;
}
.iso-masonry .has-post-thumbnail .project-hover { 
  display: none !important; 
}

Sincerely,
Andrii / Satori Studio

[skafte]

Brilliant! It’s looking really good. Thanks!

Just working on making the overlay hover background green now. I reckon I’ll be able to do this myself, so please don’t spent any more time on this, however, if you can easily see where the problem is, then I’d be happy to know! :-)

Thanks! I owe you a drink!

Jonas

[skafte]

Damn! Can’t really seem to make it work… Any ideas?

http://theme.alternativet.dk/

Sorry to be a bother!

Jonas

[satori]

Hey Jonas,

this bit from the last piece of code I posted should have done the trick –

.iso-masonry .has-post-thumbnail .image-post-overlay:hover {
  background-color: #0F0;
}

Have you tried it? If that doesn’t work, give this a try:

.iso-masonry .has-post-thumbnail:hover .image-post-overlay {
  background-color: #0F0;
}

Best,
Andrii / Satori Studio

[Author]

Posts