Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 27, 2018 at 4:14 am #903618
    mrtechnique

    I have some round image on https://atlheart.mrtechnique.com/. I had created a border initially by giving the images a class name and using the border-radius property, but I ran into problems on Safari. The transparent white overlay isn’t rounded. I had removed the class name temporarily, but put it back on, but I can’t get the border back.

    I want to get rid of the transparent white overlay on hover and the arrow. I also want to put a border around the rounded images. Could someone help? Thank you in advance.

    January 27, 2018 at 5:11 am #903623
    Mike

    Hey mrtechnique,
    To remove the overlay and arrow, please try this code in the General Styling > Quick CSS field:

    #top.home .image-overlay .image-overlay-inside {
display: none !important;
}
#top.home .avia_transform a:hover .image-overlay {
    display: none !important;
}

    This code has been designed to only work on your homepage, please remove #top.home from the code if you want it to work on all pages.
    To create a border around the images, try this code:

    #top.home .av-styling-circle .avia_image {
    border-style: solid!important; 
    border-color: #ffffff!important; 
}

    This code also has been designed to only work on your homepage.

    Best regards,
    Mike

    January 27, 2018 at 5:27 am #903625
    mrtechnique

    Thanks, Mike. That took care of arrow that appears on hover, but it didn’t remove the transparent white background color. The border disappears on hover. On Safari, the circled images are getting cropped on zoom. You can see it in this screen recording:

    http://recordit.co/cd9JK5xYKq

    Thanks for your help in advance.

    January 27, 2018 at 6:46 am #903634
    Mike

    Hi,
    Thank you for the video, while I don’t have Safari, and I don’t see the square over the image, I will try to help.
    One issue is that the overlay has a !important; in the css that will be very hard to over power, yet I notice the image over “research” does not have the overlay, please try to see if you can change the other two to the same settings.

    Or please try editing /enfold/css/base.css on line 371 you will fine this code:

    .avia_transform a:hover .image-overlay{opacity: 0.7 !important;}

    please change it to:

    /*.avia_transform a:hover .image-overlay{opacity: 0.7 !important;}*/

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.