Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #522837

    Hello.

    I would like to have a hidden text box that appears only when you hover over the image and hides again when you move the mouse away, as shown on the link attached. Is this possible?

    Thank you.

    Eva

    #522884

    Hey Eva!

    Yes, that would be possible using custom CSS. Enabling custom CSS field for ALB would help – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Regards,
    Yigit

    #522889

    Hi Yigit,

    Thanks for your quick reply!

    I have enabled the custom css field for ALB, as I needed to add custom css class for something else on the site. In this case I am not sure what to do though. Do I give my text block a custom id? And then what? If you could help me with the code that will be much appreciated.

    Thanks so much.

    Eva

    #522895

    Hey!

    Do you have a similar page created? If so, please create a temporary admin login and post it here privately :)

    Cheers!
    Yigit

    #522908

    I’ve just created a draft page (attached) of what I’d like to achieve. The text boxes are all visible now, but I’d like them to be hidden and if we can hover over the image (if this is not possible then hover over where the text box is) and the text appears.

    I’ve attached the login details.

    Thanks again! :-)

    Eva

    #523343

    Hey!

    I gave “hidden-text” class to text columns and “cust-img” class to img columns and then added following code to bottom of Quick CSS field

    .hidden-text { opacity: 0; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;  }
    .cust-img:hover + .hidden-text, .hidden-text:hover { opacity: 1; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }

    I had to move all text columns to right of the images to avoid bugs :) Please review your website now

    Regards,
    Yigit

    #523359

    Thanks Yigit. That works great. Just a couple of questions…

    Does this mean I am not able to have some text on left and some on right hand side? (sorry don’t understand what you mean about bugs. :-/)

    Also, it doesn’t quite work on mobile. You can see the images but no text.?

    Thanks again so much for this.

    Eva

    #523363

    Hi!

    Please change the code to following one

    @media only screen and (min-width: 1024px) {
    .hidden-text { opacity: 0; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;  }
    .cust-img:hover + .hidden-text, .hidden-text:hover { opacity: 1; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }}

    That should show the text on mobile.

    Showing the text when hovering on image would be only possible if text comes after the image and not the other way around. If you place your text on the left, hovering on image would not make it visible, only hovering on text would. Bringing jQuery into the game would make that possible but that requires a deeper customization :)

    Cheers!
    Yigit

    #523382

    Thanks so much, that works fine on mobile too!

    You’re great!:-)

    Eva

    #523392

    Hi!

    You are welcome!

    Cheers!
    Yigit

    #526320

    Hi Yigit,

    One question relating to the above… Currently I have 1/4 columns, however I would like to have wider columns for the text and narrower for images (info attached). Could I give specific width (percentage) to each column?

    Thanks! :-)

    Eva

    #526324

    Hi!

    Please add following code to Quick CSS

    @media only screen and (min-width: 1024px) {
    .hidden-text-one, .hidden-text-two,.hidden-text-three, .hidden-text-four {
        width: 56%!important;
    }}

    Best regards,
    Yigit

    #526330

    Thanks a million!!

    That was a super fast reply! :-)

    Regards,

    Eva

    #526333

    Hi!

    You are welcome Eva, glad we could help :)
    Let us know if you have any other questions or issues

    Best regards,
    Yigit

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Text box appear on hover’ is closed to new replies.