hover on column background image, floating button

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

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

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

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