Lay Theme Forum

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

    Shake/move project title on thumbnail on hover

    General Discussion
    hover mouseover thumbnail project title
    2
    5
    1477
    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.
    • D
      dnz last edited by

      Hey Armin,

      once again I'd need a little push in the right direction.

      I would love to modify the hover effect of the project title on my project thumbnails. I would like to add a little movement to the text when you hover over the thumbnail. Pretty much like Thomas does it here: http://thomaskorf.com/

      So what would be the right class to modify the text? I tried finding out with the inspector but had no luck.

      Thanks!

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

        Screen Shot 2016-05-23 at 12.12.19.png

        Hey!
        I think you can work with .titlewrap-on-image or .title

        1 Reply Last reply Reply Quote 0
        • D
          dnz last edited by

          Hey Armin,

          Thanks! Got it to work.

          That's the css I use:

          .title {
            display: inline-block;
            vertical-align: middle;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-osx-font-smoothing: grayscale;
            -webkit-transition-duration: 0.1s;
            transition-duration: 0.1s;
            -webkit-transition-property: transform;
            transition-property: transform;
          }
          .title:hover, .title:focus, .title:active {
            -webkit-transform: scale(2) rotate(15deg);
            transform: scale(2) rotate(15deg);
          }
          

          I was wondering if there is a chance to make the title move when I'm hovering over the thumbnail instead of the specific title/text? What would be the right class here? I tried a few but couldn't get it to work.

          Thanks again!

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

            .thumb:hover .title{}
            

            That should work

            1 Reply Last reply Reply Quote 0
            • D
              dnz last edited by

              Great! Thanks!

              1 Reply Last reply Reply Quote 0
              • First post
                Last post
              Post a link to where the problem is if possible, please <3
              I don't answer or check forum DMs, please just post on the forum.
              Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com

              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. When using a WordPress Cache plugin, disable it or clear your cache. Now see if your problem solved itself.
              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

              H

              Recent Topics

              • FILTER Categories showing all projects

              • H

                Vimeo embed with autoplay and loop is really slow...help!

              • A

                website not loading on iphone safari

              • Gridder hides content / thumbnail grid

              laytheme.com