Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Mouseover thumbnail opacity

    General Discussion
    3
    11
    216
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • K
      kristyjcheng last edited by

      Hello,

      I'm currently using the mouseover image for thumbnails option and would like the mouseover image to fade in. I'm not sure if I have the correct classes for the thumbnails, is this right?

      .thumb has-mouseover-img mo_thumb{
      opacity:0;
      transition-duration: 150ms;
      transition-timing-function: ease-out;
      }
      .thumb.has-mouseover-img:hover mo_thumb{
      opacity:1;
      transition-duration: 150ms;
      transition-timing-function: ease-out;
      }

      Thank you!

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Dear @kristyjcheng
        can you post a link to your website where you want to have the effect?

        Best!

        Marius

        www.mariusjopen.world

        K 1 Reply Last reply Reply Quote 0
        • K
          kristyjcheng @mariusjopen last edited by

          @mariusjopen Hi Marius, my website is kristyjcheng.com! I have the mouseover effect for the SPCA project currently.

          1 Reply Last reply Reply Quote 0
          • mariusjopen
            mariusjopen Global Moderator last edited by

            Dear @kristyjcheng
            I need to ask Armin for that!

            Best!

            Marius

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • K
              kristyjcheng last edited by

              Hi @mariusjopen, any updates on this? Sorry to bother!

              1 Reply Last reply Reply Quote 0
              • mariusjopen
                mariusjopen Global Moderator last edited by

                Dear @kristyjcheng
                not yet. In a bit!

                Best!

                Marius

                www.mariusjopen.world

                1 Reply Last reply Reply Quote 0
                • arminunruh
                  arminunruh Global Moderator last edited by

                  please use this css:

                  .no-touchdevice .thumb.has-mouseover-img:hover .ph{
                  	img:first-child{
                  		opacity: 0;
                  	}
                  	img.mo_thumb{
                  		opacity: 1;
                  	}
                  }
                  .touchdevice .thumb.has-mouseover-img.hover .ph{
                  	img:first-child{
                  		opacity: 0;
                  	}
                  	img.mo_thumb{
                  		opacity: 1;
                  	}
                  }
                  .thumb.has-mouseover-img img.mo_thumb{
                  	opacity: 0;
                  }
                  .thumb.has-mouseover-img img.mo_thumb,
                  .thumb.has-mouseover-img img:first-child{
                  	visibility: visible;
                  }
                  

                  the new lay theme update will include this as an option

                  1 Reply Last reply Reply Quote 0
                  • K
                    kristyjcheng last edited by

                    @arminunruh Hi Armin! I tried adding this code to my site but the css is telling me "Unknown property 'img' Expected RBRACE" on the lines with img:first-child. Any ideas on what to do?

                    1 Reply Last reply Reply Quote 0
                    • mariusjopen
                      mariusjopen Global Moderator last edited by

                      Dear @kristyjcheng
                      are you still able to save it and does it work anyway?

                      Best!

                      Marius

                      www.mariusjopen.world

                      1 Reply Last reply Reply Quote 0
                      • K
                        kristyjcheng last edited by kristyjcheng

                        @mariusjopen I have it applied to my website right now, it makes the hover image not show up at all?

                        EDIT: @arminunruh just updated Laytheme, the new option works now! Thank you for the mouseover hover option!

                        1 Reply Last reply Reply Quote 0
                        • mariusjopen
                          mariusjopen Global Moderator last edited by

                          Great! Happy to hear!

                          www.mariusjopen.world

                          1 Reply Last reply Reply Quote 0
                          • First post
                            Last post

                          Before you post

                          Use the Search Feature. Maybe there is already a solution to your issue.

                          1. Update Lay Theme and all Lay Theme Addons
                          2. Disable all Plugins
                          3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                          4. Now see if your problem solved itself
                          5. Go here, see if your problem is listed here:
                          Troubleshooting

                          When you post:
                          1. Post a link to where the problem is
                          2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                          Thanks!

                          Online Users

                          Recent Topics

                          • N

                            website blank.

                          • S

                            Theme crashed - because of Polylang?

                          • S

                            New fade-in / opacity bug?

                          • A

                            Unable to update lay theme / to login wp admin

                          laytheme.com