New Front EN › Support Forums › Ikebana Theme Support › Excerpts overlay don't show on portfolio projects with no image
Tagged: Excerpts
- This topic has 17 replies, 2 voices, and was last updated 10 years, 4 months ago by
satori.
-
AuthorPosts
-
April 20, 2014 at 9:56 pm #3037
satori
KeymasterHey 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 StudioApril 21, 2014 at 8:13 am #3042skafte
ParticipantHi 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.jpgExample 2: Hover on text tile ‘Medvirk’ – NB. the only thing that changes is the background colour.
https://www.dropbox.com/s/m65i0yqdxd96bwd/Example2_HoverOnMedvirk.jpgExample 3: Hover on the large featured image tile – NB. The overlay background colour changes.
https://www.dropbox.com/s/xbkpc467qp4row3/Example3_HoverOnFeaturedImage.jpgIn 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
April 21, 2014 at 11:47 am #3049satori
KeymasterHey 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 StudioApril 21, 2014 at 6:57 pm #3060skafte
ParticipantThanks 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
April 22, 2014 at 8:49 am #3065satori
KeymasterHey 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 StudioApril 22, 2014 at 9:16 am #3067skafte
ParticipantBrilliant! 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
April 22, 2014 at 10:05 am #3072skafte
ParticipantDamn! Can’t really seem to make it work… Any ideas?
Sorry to be a bother!
Jonas
April 23, 2014 at 7:57 am #3077satori
KeymasterHey 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 -
AuthorPosts
- You must be logged in to reply to this topic.