Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • March 2, 2016 at 5:33 pm #592207
    shawnbanack

    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, 9 months ago by shawnbanack.
    March 3, 2016 at 12:11 am #592354
    shawnbanack

    Or 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 #593699
    Ismael

    Hi!

    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,
    Ismael

    March 5, 2016 at 5:02 pm #593753
    shawnbanack

    I’ve provided detail in the private section. I do not want the site details public.

    March 7, 2016 at 11:25 am #594203
    Ismael

    Hi!

    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, 9 months ago by Yigit.
    March 7, 2016 at 11:41 pm #594667
    shawnbanack

    See private

    March 8, 2016 at 12:48 am #594699
    Yigit

    Hey!

    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!
    Yigit

    March 16, 2016 at 11:47 am #598879
    shawnbanack

    Is 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 #598888
    shawnbanack

    Also, 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 #599806
    shawnbanack

    See Priviate

    March 20, 2016 at 6:54 am #600812
    shawnbanack

    I 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 #600892
    Basilis

    Hi!

    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,
    Basilis

    March 21, 2016 at 7:30 pm #601462
    shawnbanack

    Private

    March 25, 2016 at 7:01 pm #603693
    Andy

    Hey!

    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

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.