Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • September 2, 2017 at 7:49 pm #847216
    webWahine

    Hello
    I’ve looked at several posts and can’t get the hover icon to change, or make the circle opacity 1. I have this, below. Please advise. Thank you.

    I have tried the following, trying to make it the magnifying glass –

    content: ‘\F50D’;
    content: ‘\\F50D’;
    content: ‘\1F50D’;

    /* circle and arrows on hover */
.image-overlay .image-overlay-inside::before {
	/* to hide - background: none !important; */
	background-color: #666 !important;
	opacity: 1 !important;
}

.image-overlay.overlay-type-extern .image-overlay-inside:before {
	/* magnifying glass - see http://web.archive.org/web/20140912210715/http://entypo.com/characters/ */
    content: '\\F50D';
    font-family: 'entypo-fontello';
}
    September 3, 2017 at 6:49 am #847306
    Rikard

    Hey webWahine,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    September 3, 2017 at 7:24 am #847322
    webWahine

    Hello, Rikard

    Yes, by all means! I have sent the information in the private area :)

    September 4, 2017 at 9:54 pm #847910
    Yigit

    Hi,

    I added following code to Quick CSS

    .image-overlay.overlay-type-extern .image-overlay-inside:before {
    content: '\E803';
    font-family: 'entypo-fontello';
}

    Please review your website

    Best regards,
    Yigit

    September 5, 2017 at 5:39 pm #848220
    webWahine

    Thanks but I don’t see a change. Also, how can I make the circle opacity 1 please :)

    September 6, 2017 at 1:52 am #848422
    Yigit

    Hi,

    1- Code i added changes the icon. Attached a screenshot in private content field.

    2- You have following code in Style.css file of your child theme

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

    Please edit it and change opacity level to “1”.

    Best regards,
    Yigit

    September 6, 2017 at 6:54 pm #848802
    webWahine

    Yes, but I want the black image overlay to remain as 0.4 and have the inner circle be opacity 1. they are obviously linked with that css but can I isolate just the circle to be 100%?

    I see the screenshot, thanks – odd, it’s not showing up after repeated refreshing…

    September 8, 2017 at 4:29 pm #849628
    Yigit

    Hi,

    You have following code in Style.css file of your child theme

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

    Please change it to following

    .avia_transform a:hover .image-overlay {
opacity: 1!important; 
}
.image-overlay { 
background-color: rgba(0,0,0,0.4); 
}
.image-overlay.overlay-type-extern .image-overlay-inside:before { 
background: none !important; 
}

    Best regards,
    Yigit

    September 8, 2017 at 6:49 pm #849684
    webWahine

    Sorry, not quite. Now the circle is gone.

    September 11, 2017 at 3:59 am #850297
    Ismael

    Hi,

    Please remove the css modification then use the following filter to change the search icon.

    function avf_default_icons_mod($icons) {
	$icons['search']	 = array( 'font' =>'entype-fontello', 'icon' => 'uf16d');
	return $icons;
}
add_filter('avf_default_icons','avf_default_icons_mod', 10, 1);

    Adjust the font and icon value.

    Use the following css code to change the color and transparency of the overlay circle.

    .image-overlay.overlay-type-extern .image-overlay-inside:before {
    background: rgba(255,255,255,.5);
}

    Best regards,
    Ismael

    September 11, 2017 at 8:19 pm #850654
    webWahine

    Thank you, Ismael, but I’m trying not to have to use any custom js so I have reverted back to having the circle and background at the same opacity.
    I also don’t want to keep bothering you with this tiny matter.

    With that said, when I link to the page –

    The magnifying glass is not anything like the code you sent that makes it show up instead. So where did you get –

    content: ‘\E803’;

    from please, when the site says it’s

    🔍
    U+1F50D
    🔍

    thanks again! :)

    September 12, 2017 at 8:38 am #850857
    Ismael

    Hi,

    That is not a custom js. That is a filter to change the default icon value. Did you try it? Which icon would like you to replace it with? The character “F50D” is the same as “E803”. The code are different because Kriesi created a custom character map.

    Best regards,
    Ismael

    September 12, 2017 at 7:13 pm #851196
    webWahine

    Ah! So I can put that filter right into my style.css file? Where can I find the codes for your custom character maps, please? :)

    September 13, 2017 at 7:42 am #851408
    Ismael

    Hi,

    You have to put the filter in the functions.php file. The charmap-compat.php and charmap.php files are located in the enfold\config-templatebuilder\avia-template-builder\assets\fonts\ folder.

    Best regards,
    Ismael

    September 13, 2017 at 9:04 pm #851720
    webWahine

    Ok, thank you, Ismael! I appreciate your help :)

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Change hover icon and opacity of circle on portfolio item’ is closed to new replies.