-
AuthorPosts
-
March 22, 2018 at 5:14 pm #931466
Hi,
Is it possible to have some sort of text overlay on a portfolio grid module item?
You can see an example on the following Enfold page (scroll down to images of bicycle categories).
Can you tell me how they did this? See private linkRegards Rob
- This topic was modified 6 years, 7 months ago by jojoba007.
March 22, 2018 at 6:50 pm #931559Hey jojoba007,
This modification requires some time. Please wait while I work on your ticket and update you with the results here.
Thank you for using Enfold :)
Best regards,
VinayMarch 22, 2018 at 8:39 pm #931612Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
/* Portfolio overlay with title */ /* Disable default animation */ #top .grid-entry a:hover .image-overlay .image-overlay-inside { animation: none; } /* Overlay */ #top .grid-entry .image-overlay .image-overlay-inside:before { content:''; position: absolute; background: #222; height: 100%; width: 100%; border-radius:0; top: 0; left: 0; margin: 0; } /* Remove default title below */ .grid-content .avia-arrow, #top .grid-entry .grid-content { display: none; } /* Display title on hover*/ .grid-entry a:hover:before { content: attr(title); position: absolute; width: 100%; z-index: 1000; text-align: center; opacity: 1; font-size: 18px; color: #ffffff !important; top: 50%; transform: translateY(-50%); animation: avia-fadein 0.75s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275) !important; }
Best regards,
VinaySeptember 19, 2019 at 5:28 am #1139783This *almost* works for me, the title is offset horizontally, any ideas?
September 19, 2019 at 5:37 am #1139786Ok, so I’ve made some progress with this
by amending the following to:.grid-entry a:hover:before { content: attr(title); position: absolute; width: 100%; z-index: 1000; text-align: center; opacity: 1; font-size: 18px; color: #ffffff !important; transform: translateY(-50%); animation: avia-fadein 0.75s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275) !important; top: 50%; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; }
Final piece of the puzzle for me, is to get the excerpt in there, below the title – any ideas anyone?
- This reply was modified 5 years, 1 month ago by Jason.
September 22, 2019 at 6:02 pm #1140665Hi Jason,
I am getting a 404 on that page. Are the excerpts loaded on the page at all?
Best regards,
VictoriaSeptember 23, 2019 at 2:10 am #1140801Hi Victoria,
I’m not sure what page you’re talking about as I didn’t link to one(?)
In any case, I’ll provide a link to this page in the private content area for you now.
Thanks :)September 24, 2019 at 9:23 pm #1141597Hi Jason,
Oh :) I looked at the original post and did not realize that it was not you who started the thread.
You need to add excerpts. Take a look here
https://kriesi.at/support/topic/portfolio-grid-add-excerpt-under-title/#post-578348Best regards,
VictoriaSeptember 24, 2019 at 11:48 pm #1141639Hi Victoria,
I’ve kind of already got this, as you can see above i’m not displaying anything below the grid image – but on top of it, on hover. i already have the title appearing, & have title & excerpt selected via the grid options, plus I have added an excerpt to the post, but it’s not displaying the excerpt – only the title.
here’s the css i’ve used (found on another thread here):/* Portfolio overlay with title - disable default animation */ #top .grid-entry a:hover .image-overlay .image-overlay-inside { animation:none; } /* Portfolio overlay with title - overlay */ #top .grid-entry .image-overlay .image-overlay-inside:before { content:''; position:absolute; background:#1d2553; /* blue */ height:100%; width:100%; border-radius:0; top:0; left:0; margin:0; } /* Portfolio overlay with title - remove default title below */ .grid-content .avia-arrow,#top .grid-entry .grid-content { display:none; } /* Portfolio overlay with title - display title on hover*/ .grid-entry a:hover:before { content:attr(title); position:absolute; width:100%; z-index:1000; text-align:center; opacity:1; font-size:18px; color:#fff!important; transform:translateY(-50%); animation:avia-fadein .75s 1 cubic-bezier(0.175,0.885,0.320,1.275)!important; top:50%; padding:0!important; display:flex!important; align-items:center; justify-content:center; } .avia_transform a:hover .image-overlay { opacity:1!important; }
so i want the excerpt to appear below the title.
September 25, 2019 at 6:26 pm #1141907Hi Jason,
Yes, of course, I understood all of the above from the original reply. But the thing is I do not see the excerpt rendered in the html and so you cannot really have it in the overlay, even if you could JavaScript to move it to the overlay. This is why I gave you the link to the thread where you can see how the excerpts can be added.
Best regards,
VictoriaSeptember 26, 2019 at 12:08 am #1142054Hi Victoria,
Yes, odd how the excerpt isn’t in the HTML, I’ll revisit that other thread & look a little closely at it.
Will report back.
Thanks,
JasonSeptember 26, 2019 at 10:31 am #1142181Hi Jason,
Great :)
If you need further assistance please let us know.
Best regards,
VictoriaApril 8, 2020 at 11:27 am #1201871Hi all,
I was able to use the above code but in addition I would like to have a space (20px) between de overlay and all sides of the image. I’ve tried to add an margin to the .image-overlay class but that didn’t work. Would you be able to tell me how I can get a space between the actual image and the overlay?
The goal would be to have a over that looks similar to this: https://enea.ch/projekte/
If you need more info please let me know.
Kind regards,
AndrewApril 10, 2020 at 8:45 pm #1202743Hi Andrew,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaApril 13, 2020 at 5:47 pm #1203322Hi Victoria,
here is the link to the site which I am working on https://gardens.ch/privatgaerten/
As already mentioned I would like it to have a margin to the border like in this example: https://enea.ch/projekte/Kind regards,
AndrewApril 14, 2020 at 3:07 pm #1203611Hi Andrew,
I tried to come up with the css and could not find a viable solution, unfortunately. It’s tricky with the positioning for Masonry calculated and set in JavaScript.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.