Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1188038

    HI
    I have a couple questions on the test site below:

    There are some 1/2 columns with background images and hover enabled.
    How can I change the color or opacity of the hover?
    Right now it’s going transparent and looks strange since my columns are partially overlapping color sections.
    Would it also be possible to have another image on the hover?

    On the same page, I have a floating “contact me” button on the right side, using this code I found on another thread:

    .floating a {
    position: fixed!important;
    z-index: 99;
    left: 85%;
    top: 85%;
    }

    but the button slips behind some of the images, but the code fix I found fro that (changing z-index: 99999 and position to relative) didn’t work for me. Can you help me fix this with the correct code? Is it better to use a plugin for this sort of thing?
    /*thanks for your help*/
    Nancy

    • This topic was modified 4 months, 1 week ago by  Munford.
    #1189011

    Hey Munford,
    Sorry for the late reply, your image hover opacity is occurring with this css:

    body .flex_column.avia-link-column.avia-link-column-hover:hover {
        opacity: 0.8;
    }

    You can change this value and add an !important; to the css like this:
    opacity: 1 !important;

    Best regards,
    Mike

    #1189221

    Hi MIke
    Thanks but that just makes the image 100% opaque on hover…
    what I would like is to change it to a color overlay – white – instead of changing opacity.

    can you also take a look at the issue #2 with the floating contact button?
    thanks
    Nancy

    #1189285

    Hi,
    Thank you for your feedback, so for the 4 images on your home page that are also links you can add this css to make them white on hover, I used rgba(255, 255, 255, .8) so it’s 80% white, but you can change the last number to make it more or less white.
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top.home .flex_column.av_one_half.avia-link-column-hover:hover:before {
      content:"";
      display: block;
      height: 100%;
      position: absolute;
      visibility: visible !important; 
      top: 0;
      left: 0;
      width: 100%;
      background-color: rgba(255, 255, 255, .8)!important; 
    }

    After applying the css, Please clear your browser cache and check.

    The reason your floating button’s z-index is not on top of all of your elements is because of the stacking order of the page, that is since your button is at the top of the page elements later are still stacked on top. To correct please move your button down to above the footer, your css will still place it in it’s fixed position and it will be on top of the elements.
    I tested this with jQuery and it works, if you want to try the jQuery I tested with then add this code to the end of your functions.php file in Appearance > Editor:

    
    function custom_script(){
      ?>
      <script>
    (function($) {
      $(document).ready(function(){
         $('.avia-button-wrap.avia-button-right.floating').detach().insertBefore('#footer');
      });
     })(jQuery);
     </script>
    <?php
    }
    add_action('wp_footer', 'custom_script');

    you will need to keep your button css in place.

    Best regards,
    Mike

    #1189448

    HI
    thanks for your help, that worked.

    Would it be possible to have an image rollover on hover instead, using custom css on the columns?
    My first column has the css id of “nordic” fx.

    Also on the same page at the top – I am not using a menu but there is still a space for the menu bar below my logo at the top. Can that be disabled?
    I tried a few things that did not work.

    thanks
    Nancy

    • This reply was modified 4 months ago by  Munford.
    • This reply was modified 4 months ago by  Munford.
    • This reply was modified 4 months ago by  Munford.
    #1189749

    Hi,
    To remove your empty menu area on your homepage we can hide the ID and adjust the height with this css:

    #top.home #header_main_alternate {
    	display: none !important;
    }
    .html_header_top.html_header_topbar_active.html_header_sticky.html_large.html_bottom_nav_header #top.home #main {
        padding-top: 158px !important; 
    }

    To change the image of “nordic” on hover, please try this css:

    #top.home .flex_column.av_one_half.nordic:hover {
      background: url(https://[see-below]/wp-content/uploads/2014/12/f-G-Nepal-blue-diamond.jpg) !important; 
      background-repeat: no-repeat !important; 
      background-size: cover !important; 
      background-position: 50% 50% !important; 
    }

    please change the domain “[see-below]” in the css above with the domain in the Private Content area, or use your own image url.

    Best regards,
    Mike

    #1190258

    HI Mike
    That all worked great!
    I also looked at a way to fade the hover in and out using a code block – would it be possible to put the same effect on the .nordic column?
    See the duplicate image on the right on the page below. I’d like the background image on the left to have the same effect.
    I am using the code from this post: http://css3.bradshawenterprises.com/cfimg/
    thanks so much for your help!
    Nancy

    #1190860

    Hi,
    Glad this helped, for your new effect the layout is different, the code you found and added as a codeblock works with a smooth transition because both images are in the div, where for the element we have worked on the first image is replaced with the second via css. We can get pretty close with “keyframes” but there is a moment that no image shows, unlike your code block example.
    If you prefer this effect I recommend creating your layout like your code block, it works well.

    Best regards,
    Mike

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.