Interactive images ?

I was curious if anyone had any recommendations for adding a sort of interactive image to my site. I found this Interactive banner example , which does almost exactly what I am looking for. However figuring out how to do this with upfront has been tricky.

My end goal is to add this sort of pop text on top of the image when you float over it, and then when you click, a popup comes up showing more information. Now I've managed with some googling to get the popup working. But getting some sort of animated text to show on top the image has been much more tricky.

My Google-fu has failed me with this one. Hopefully I can get some recommendations, I'm not looking to have someone do this for me, if it gets complicated. I can learn it as I don't mind, but I really need some direction to get this ball rolling again.

A plugin to do this would be awesome but if not, I assume some CSS trickery or something, can pull this off ? I am open to learning, any ideas or solutions would be great! Thanks guys !

  • Kasia Swiderska

    Hello Christopher,

    To get that working in Upfront, you will need use code element where you place separately HTML part and CSS part of code.
    Here is example and simpler code you can use as base https://codepen.io/afinedayproductions/pen/JipKF (it does not use jQuery like in your example)

    What this code snippet is using is CSS3 transitions http://www.w3schools.com/css/css3_transitions.asp
    https://www.w3.org/TR/css3-transitions/
    https://css-tricks.com/almanac/properties/t/transition/

    Here is another code snippet on how to achieve the effect https://codepen.io/ianfarb/pen/ikeAf

    let me know of you have more questions

    kind regards,
    Kasia

  • Christopher

    I gotta say this did help a lot. Although I didn't use any of these directly, it led me to the correct wording I needed and gave me a lot of insight. With some googling I pulled off nearly exactly what I was looking for.

    Also apparently there is captions built into the upfront editor, and if you add some of this custom CSS to it you can make it fancy and animated. You just hit settings on the image, create a new preset, enable captions, and add your custom CSS transitions in the CUSTOM CSS area. And BAM , fancy sliding captions when you hover over the image.(still cant believe I spent like a full day trying to figure it out)

    This takes the hassle out of using the code widget which tends to confuse me, mostly because I see pictures like the ones above but when I use the code widget it looks totally different (like you are meant to put the code all in one place) and doesn't play ball well. Which probably means I am clicking on the wrong thing somehow. Over all this was great info though and led me right to the answer within minutes. Thank you!!!!

    If anyone is interested in what I put in the custom css, so they have sort of a place to start it is below. Oh and don't judge lol , I am better at googling then anything else :stuck_out_tongue:, but it does indeed work and adds the fancy-ness I was looking for

    .wp-caption {
    transform:translate(50px,50px);
    opacity:0;
    transition:all .2s cubic-bezier(0,1.07,1,1.25);
    }
    .thenameofthepresetyoucreated:hover .wp-caption {
    transform:translate(0px,0px);
    text-decoration: underline;
    transition: all 350ms ease-out;
    opacity:1;
    }

    Also on a side note, as I was typing this, I realized that if you hit the word custom code on the code widget, it takes you to the side of the widget I wanted -.- cant believe I missed that to. Still I like the method I found, seems to be more dummy proof for those of us without that much experience.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.