-
AuthorPosts
-
March 2, 2016 at 5:33 pm #592207
I’m using the Enfold Shop theme; I absolutely love the full width grid style photo layout and want to use it in place of a slider/full page single photo.
I have it set up with written text on each photo, however, I’d like to have it set up in the following way:
-Circular/fancy buttons in the middle of each photo that contain the caption text
-When one hovers over these buttons, additional text will show up at the bottom of the photo – this part is possible already – to have text show up when you hover; however, without the buttons containing text, I already need to use the caption to display what each photo is related to + the caption shows up in the middle of the photo, not the bottom.Currently, I do not see a quick/easy way to do this. Can you provide some suggestions?
Thanks,
Shawn
- This topic was modified 8 years, 8 months ago by shawnbanack.
March 3, 2016 at 12:11 am #592354Or even icons – I am looking for the ability to have 4 photos side by side on my homepage, each with circular icons/buttons in the center of each photo, where I can add linked text to the inside of each icon/button…..
March 5, 2016 at 11:27 am #593699Hi!
Thank you for using Enfold.
Could you please provide a screenshot of the button that you have in mind? You can set the caption to show only on hover and then we can add the button with css. This link might help: http://www.w3schools.com/css/css_pseudo_elements.asp
Regards,
IsmaelMarch 5, 2016 at 5:02 pm #593753I’ve provided detail in the private section. I do not want the site details public.
March 7, 2016 at 11:25 am #594203Hi!
Use the Grid Row element, add the image as background for each cell then insert the icon element. Or add a code or text block. This is the html code for the circular button:
Cheers!
Ismael- This reply was modified 8 years, 8 months ago by Yigit.
March 7, 2016 at 11:41 pm #594667See private
March 8, 2016 at 12:48 am #594699Hey!
I edited Ismael’s post. You can use Text tab of Text Block element or Code Block element to insert the code he posted.
Cheers!
YigitMarch 16, 2016 at 11:47 am #598879Is it possible to still make the photo zoom in slightly on hover? When using a background, the option doesn’t exist.
March 16, 2016 at 12:24 pm #598888Also, that code doesn’t really work – it just adds the text to the photo in the upper left hand corner….
March 17, 2016 at 5:43 pm #599806See Priviate
March 20, 2016 at 6:54 am #600812I think the code you are referencing above may only be compatible with bootstrap. I do not currently use bootstrap.
March 20, 2016 at 9:13 pm #600892Hi!
I have loaded your web site and I can no see the code ismael suggested, so I can not see how we can deal with that..
Please do add the code and let us know so we can review.Again, please be patience and do not do multiple answers to the topic, as it goes last to our que
Regards,
BasilisMarch 21, 2016 at 7:30 pm #601462Private
March 25, 2016 at 7:01 pm #603693Hey!
so basically you just need to adjust the position of your captions, right? Use this code in your Quick CSS field:
.av-image-caption-overlay-center { position: relative; top: 38px; }
and adjust as needed.
For the other function you can try ALB’s “Portfolio Grid” element. Look for “Link Handling” and choose for example “Ajax Portfolio”.
Best regards,
Andy -
AuthorPosts
- You must be logged in to reply to this topic.