Lay Theme Forum

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

    Project Thumbnail Mouseover

    General Discussion
    mouseover thumbnail
    2
    3
    959
    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.
    • A
      ana last edited by

      Hi Arwin!
      Fisrt congrats for your amazing theme.. I am so in love whit it!

      I am quiet new and I´ve been a few hour trying to get a mouseover transparent background on projects thumbnails!!. I will need some like this example http://www.photosalonhelga.com/

      Any idea to get it? I have been trying with the code you suggeted a few weeks ago

      .col[data-type="project"]:hover .ph{
      border: 10px solid #00f;
      }
      .col[data-type="project"] .ph{
      border: 10px solid transparent;
      }

      But this is to add a border to thumbnails and what I basicly need is to keep the project image around as a border.
      THANK YOU SO MUCH!!

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

        Hey ana!

        That's their CSS, hope that helps!

        .col[data-type="project"] .ph span {
            background-color: white;
            top: 5%;
            left: 5%;
            right: 5%;
            bottom: 5%;
            width: 90%;
            height: 90%;
            -webkit-opacity: 0;
            -moz-opacity: 0;
            opacity: 0;
            -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
            filter: alpha(opacity=0);
            -webkit-transition: all 400ms ease-out;
            -moz-transition: all 400ms ease-out;
            -ms-transition: all 400ms ease-out;
            -o-transition: all 400ms ease-out;
            transition: all 400ms ease-out;
        }
          .col[data-type="project"] .ph span:hover {
            -webkit-opacity: 1;
            -moz-opacity: 1;
            opacity: 1;
            -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
            filter: alpha(opacity=100);
          }
        
        A 1 Reply Last reply Reply Quote 0
        • A
          ana @arminunruh last edited by

          @arminunruh Helps A LOT! This is working perfectly now!
          Thank you so much! Great work!

          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

          Recent Topics

          • A

            website error

          • Website gone all blank after update 6.3.1

          • S

            can't update project category content

          • C

            lightbox: how to go back to project instead of home with back button

          laytheme.com