Tagged: , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • October 22, 2015 at 11:05 am #522837
    evdesignstudio

    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

    October 22, 2015 at 12:29 pm #522884
    Yigit

    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

    October 22, 2015 at 12:34 pm #522889
    evdesignstudio

    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

    October 22, 2015 at 12:37 pm #522895
    Yigit

    Hey!

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

    Cheers!
    Yigit

    October 22, 2015 at 1:03 pm #522908
    evdesignstudio

    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

    October 22, 2015 at 11:19 pm #523343
    Yigit

    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

    October 22, 2015 at 11:30 pm #523359
    evdesignstudio

    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

    October 22, 2015 at 11:43 pm #523363
    Yigit

    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

    October 23, 2015 at 12:02 am #523382
    evdesignstudio

    Thanks so much, that works fine on mobile too!

    You’re great!:-)

    Eva

    October 23, 2015 at 12:21 am #523392
    Yigit

    Hi!

    You are welcome!

    Cheers!
    Yigit

    October 28, 2015 at 5:48 pm #526320
    evdesignstudio

    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

    October 28, 2015 at 5:54 pm #526324
    Yigit

    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

    October 28, 2015 at 6:05 pm #526330
    evdesignstudio

    Thanks a million!!

    That was a super fast reply! :-)

    Regards,

    Eva

    October 28, 2015 at 6:08 pm #526333
    Yigit

    Hi!

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

    Best regards,
    Yigit

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Text box appear on hover’ is closed to new replies.