Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #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.
    #592354

    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…..

    #593699

    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

    #593753

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

    #594203

    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, 8 months ago by Yigit.
    #594667

    See private

    #594699

    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

    #598879

    Is it possible to still make the photo zoom in slightly on hover? When using a background, the option doesn’t exist.

    #598888

    Also, that code doesn’t really work – it just adds the text to the photo in the upper left hand corner….

    #599806

    See Priviate

    #600812

    I think the code you are referencing above may only be compatible with bootstrap. I do not currently use bootstrap.

    #600892

    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

    #601462

    Private

    #603693

    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

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