To your image hover effect.
i did a custom-class to a parent container to the image: hoverstyle1

In this case – if you want different selectors ( like categorie links or portfolio links etc. ) there must be analog css rules.
The point is to understand what is done – that is a good starting point.
The “framed on hover” element is styled via pseudo-containers ( before and after) – these containers got a border ( border left/right on after – and border top/bottom on before container )

these containers itself has no background-color – but borders – and are scaled to zero.
on hovering these container grow to 100% ( scale(1))

see result here: https://webers-testseite.de/hover-images/

here is the css code ( i did set the overlay to display none)

.hoverstyle1 .image-overlay {
  display: none !important;
}

/* hover styling images */
.hoverstyle1 a.avia_image:before, 
.hoverstyle1 a.avia_image:after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  pointer-events: none;
  background: transparent;
  width: auto;
  height: auto;
  z-index: 10;
}

.hoverstyle1 a.avia_image:before {
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
}

.hoverstyle1 a.avia_image:after {
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(0);
}

.hoverstyle1 .avia-image-overlay-wrap:hover a.avia_image:before, 
.hoverstyle1 .avia-image-overlay-wrap:hover a.avia_image:after {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

• This reply was modified 5 years, 1 month ago by Guenni007.

or does he like to : A way to change any Fullwidth Easy Slider Caption Title to H1 from inside WP?

the filter : avf_customize_heading_settings is now in newest enfold only in the av-helper-slideshow.php
I thought it was on former versions in each slider type.
So i only found a way to influence the whole default_heading tag by this in your child-theme functions.php:
It only changes the default_heading – if you have set a custom heading tag ( see posting of mine before with the image) it will not overwrite that.

function my_avf_customize_heading_settings( array $args, $context, array $extra_args = array() ){
	if( $context == 'avia_slideshow' ){
		$default_heading = ! empty( $dev_tags['heading_tag'] ) ? $dev_tags['heading_tag'] : 'h1';
		$args['heading'] = $default_heading;					
		$args['extra_class'] = $dev_tags['heading_class'];	
	}
  return $args;
}
add_filter( 'avf_customize_heading_settings', 'my_avf_customize_heading_settings', 10, 3 );

i did not see a way to use this filter only for the full-width slider
if you only like to influence the default_heading on fullwidth easy slider you can have your own
child-theme slideshow_fullsize.php
and change on line 810 to:
'theme_default' => 'h1',

Yes the pipe will have the “or” in the if clause.
That will work! – i’m only unsure if i had to insert that global $posts and if there is a more elegant way for the syntax.

can you try this – don’t know if this is the correct way to use this filter but it might work in combination with blog-grid style
just check for context: archive , index, tag

add_filter('avf_post_slider_args', function($atts, $context){
	global $posts;
	if($context == 'index') { $atts['columns']  = 4;}
	return $atts;
}, 10, 2);

do you mean this here – that is called hamburger – because it looks a littel bit like a burger

this to quick css:

.header_color .av-hamburger-inner, 
.header_color .av-hamburger-inner::before, 
.header_color .av-hamburger-inner::after {
    background-color: #db0d0d !important;
}

#main, .main_color, .html_stretched #wrap_all,
.avia-msie-8 .av_header_sticky_disabled#header {
  background-color: transparent !important;
}

but with background-attachment: fixed you will have some troubles on OS X Safari Systems.
see here: https://kriesi.at/support/topic/theme-is-shaking-a-lot-in-safari/

The trick will be to have a pseudo before container with same background-image and to set the whole pseudo container to position : fixed then.

Look to the differece on a safari browser on scrolling fast with or without that:

#top {
  clip-path: inset(0 0 0 0);
  background-size: 0 !important;
}

#top:before {
  background-image: inherit !important;
  background-repeat: no-repeat;
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: right center;
  will-change: transform;
}

#main, .main_color, .html_stretched #wrap_all,
.avia-msie-8 .av_header_sticky_disabled#header {
  background-color: transparent !important;
}

.main_color {
    z-index: 5 !important;
    position: relative;
}

if you are at the actual Enfold Version – you have on each Column its own Advanced Tab : Developer Settings.
There you can insert a unique ID.
But for just a unique CSS selector you do not need IDs – you can use classes as well.

hm on my page this works even without setting the rule to !important:
look f.e.: https://webers-testseite.de/portfolio/wordpress-webdesign/

is there a page i can see- because my installations have only footer postion relative

and why not make the z-index of footer bigger?

#footer, #socket {
    z-index: 502;
}

Hi Guenni007, I meant mobile devices

in this case you had to know that enfold adds a class for mobile devices to the html so you can use .responsive.avia_mobile
to influence only css on mobile devices.

f.e.: something like this has influence on ipad landscape – allthough this is 1024px width or more – but has no effect on desktop browsers
( by the way the pendent to that mobile class is: avia_desktop )

.responsive.avia_mobile #top #avia-menu .avia-menu-text {
    color: red !important;
}

That’s why I wrote it down like a recipe.
The only thing i did not show explicitly is how to give a custom-class to the color-section:
– open the options of the color section – click on tab “Advanced” and put in the input field “Custom CSS Class” the text ( allthough classes have on css a dot in front – enter here without that dot – it will be added by enfold )
you see on the right side an image of the alb layout.
On the left you see the code for the quick css. If you accept the prism script on my page you will have a copy button on top right.
Thats all. I wouldn’t know how else to pass it on to inexperienced internet users.

Edit : the solution is now private.

First i had to ask you what you are understanding on “mobile version”
do you mean small screen width or do you mean the mobile devices ?

this is a full-width slider of Enfold. – With Caption Text ( in this case with frame ) etc. pp. there are a lot of options to choose ( even the h1 for the heading could be reached.)
on Styling Tab of the slide options – you can set for different screen-width the font-sizes.

https://webers-testseite.de/terve/

Your setting is ok – but please remove the equal-height option for the columns.
have a look here for more info on how to: https://webers-testseite.de/iconboxes-with-equalheight/

As far as i understood you – you like to have the style as in the other page. ( not so bold )

But: if you can live with the “wrong” rendering – just remove the loading of the fonts in 700 weight.

If you want to make it more perfect – maybe you can live with the 500 font-weight – then you had to load the 500 font-weight instead of the 700 one – and redeclare the css for all headings to 500.