Lay Theme Forum

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

    FadeIn images on hovering a certain class

    Feedback
    2
    2
    378
    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.
    • M
      MoritzMoritz last edited by MoritzMoritz

      Hey,

      i have a short question and i hope you guys maybe could help me out.
      I´m working on a (laytheme-based) website and i want to have an effect simiular to this website where you hover (mouseover) over text (in my case i gave the text a certain class) and an image is faded in on a selected point and faded out after leaving the text. For sure its possible to get to this using javascript but when you take a look at this example you can see that also pure css should work.

      In my case the code looks like that and i´m wondering why it´s not working:

      .trigger {cursor:pointer;}
      .trigger:hover .image{opacity:1.0;}

      .image{
      opacity: 0.0;
      z-index:-100;
      display: flex;
      max-height:50vh;
      width:auto;}

      any Ideas? Thank you a lot!

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

        Hi @MoritzMoritz
        I can quickly explain how I would do it:

        1. List itemDisplay all the images with text next to it as projects
        2. Give the images a class and hide them with display: none;
        3. I would go for jquery to show and hide the images on hover. But I think the CSS way is also possible. So when you go for the CSS you make the images go display: block;on hover of the project.
        4. Don't forget to position the image position: fixed;that it always stays in the same place.

        This is already what you did somehow.

        Can you show us an example of your tryout?

        I know somewhere in this forum this topic came up. Maybe have a search for that as well.

        All the best!

        Marius

        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

        S
        A
        S
        G
        L

        Recent Topics

        • S

          can't change front page

        • M

          komische boxen auf der Website

        • S

          Theme crashed - because of Polylang?

        laytheme.com