by the way i see this effect on Mac OSX ( firefox etc) too. Not only on mobile

following is shown if i want to open the image in the browser:
https://reneadventure.com/wp-content/uploads/2018/09/Peru-Machu-Picchu.jpg

öffne die Bilder mal an deinem Desktop und schaue ob Sie da zu öffnen sind. Wenn ja- lade Sie nochmal hoch – eventuell gab es da Fehler bei der Übertragung

Da muss was mit dem Bild sein: auch hier: https://reneadventure.com/about/
ist das Bild nicht zu sehen ( auf Parallax gestellt)

i do have now on the most sites i create this to my child-theme functions.php :

function av_return_100(){ return 65; }
add_filter('jpeg_quality', 'av_return_100');
add_filter('wp_editor_set_quality', 'av_return_100'); 

it seems that this is more than a good compromise between performance and quality

hm board soft changes even under code tag the quotation marks – i make a screenshot that you can see what is the fact:
click to enlarge:

or for copy paste look here:
https://pastebin.com/gc8xNnQb

so put this to your child-theme functions.php

i think this is an advanced layer slider on top.
You can get rid of that in Layerslider activate your slider – goto slider settings – navigation area – and there it is: slideshow timers.
you have activated : show circle timer

maybe this could help you: https://stackoverflow.com/questions/22229689/how-to-make-browser-back-close-magnific-popup

and look here – on that it seems to work : http://eugenedae.github.io/Magnific-Popup-History-API-Demo/

link to github: https://github.com/EugeneDae/Magnific-Popup-History-API-Demo

• This reply was modified 6 years, 11 months ago by Guenni007.

for those who likes to know how to make it and could not read the private content:
try this here:

One possible method could be to do this by defining the type :
but the pdf has to be on your own server – does not work with global links from elsewhere:

<a class="pdf-download" href="https://www.w3.org/2003/01/Consortium.pdf" target="_blank" 
type="application/octet-stream" download="Consortium.pdf"><img src="https://www.w3.org/2008/site/images/logo-w3c-screen-lg" alt="W3Schools" ></a>

see here: https://webers-testseite.de/weber/direct-downlaod-a-pdf/

with download= : you can determine the default download name
with that class it is easier to style the link. f.e. remove overlay etc.

see the right “button” with that class: pdf-download

.pdf-download {
    display: inline-block !important;
    overflow: visible !important
}

.pdf-download .image-overlay {
display:none !important
}

.pdf-download::before {
    content: "";
    background-image: url(https://webers-testseite.de/weber/wp-content/uploads/2018/09/PDF-Icon.png);
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: 0 0 ;
    transition: all ease-in-out 1s;
    position: absolute;
    width: 100%;
    height: 100%;
    top: -30px;
    left: calc(100% - 40px);
    z-index: 5;
}

.pdf-download:hover::before {
    background-position: 0 20px !important;
    transition: all ease-in-out 1s;
    transform: scale(1.1);
    transform-origin: center center;
    -webkit-filter: drop-shadow(2px 2px 4px #333);
    filter: drop-shadow(2px 2px 4px #333);
}

• This reply was modified 6 years, 11 months ago by Guenni007.

SVG Support : activate the advanced mode –
with svg Support you can set a class on which svg placed by the img method is replaced through inline svg.
Means – if SVG Support find an image with the given class it will replace the <img src="" … /> by the svg itself.

you can see it here with the logo of the start page: https://webers-testseite.de/cynthia/
Otherwise i will not be able to set the hover effect only on one path.

If you got your inline svg i hope that your animation will work then.

a realy good 1,2,3 solution :https://kriesi.at/support/topic/adding-custom-social-icons-3/#post-934964
;)

The real good documentation is here and the solution too: https://kriesi.at/documentation/enfold/social-share-buttons/#gist85414748

so you can even take a coloured png file for that !
or you can take one of these: https://www.google.com/search?q=Google+Plus&client=firefox-b&source=lnms&tbm=isch&sa=X&ved=0ahUKEwi-h67lptndAhUHyaQKHT5YAB0Q_AUIDSgE&biw=1722&bih=1117

i open a new topic for interesting people soon …
for those who misunderstand the topic too – like me. https://kriesi.at/support/topic/second-widget-line-in-footer/

• This reply was modified 6 years, 11 months ago by Guenni007.

Well that is an enfold page – and that nice creator has no merging!
so it is a bit easier to look what he had done.
most of the rules are in his custom.css :

/* SLIDER STYLES */
.slideshow_caption{
	width: 55%;
    padding: 50px 0 50px 50px;
}

.slideshow_inner_caption {
    width: 50%;
}

.caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title,
.avia-caption .avia-caption-content p, .avia-caption .avia-caption-title{
	background: rgba(255, 255, 255, 1);
	margin: 0;
	padding: 20px 30px;
	line-height: 22px;
	text-align: left
}
.caption_framed .slideshow_caption .avia-caption-content p, .avia-caption .avia-caption-content p{
	background: rgba(255, 255, 255, 0.9) !important;
	font-size: 18px;
    width: 100%;
}
.caption_framed .slideshow_caption .avia-caption-title, .avia-caption .avia-caption-title{
    width: 100%;
    font-size: 28px;
	line-height: 32px;
}
.avia-slideshow-dots a{
	border-radius: 0;
	border: 1px solid #FFFFFF;
	background: none;
	margin: 0 2px;
}
#top .avia-slideshow-button{
	border-radius: 0;
	text-transform: none;
	font-size: 14px;
	font-weight: 400;
}
.caption_framed .slideshow_caption .avia-caption-content p, .avia-caption .avia-caption-content p {
    line-height: 24px
}

but i think the first rule you don’t need – the inner_caption makes it.

see result here: https://webers-testseite.de/slideshow-with-captionstyling/

it is always better to see a page than a screenshot.
if you got a grid-row – you can force it to be the same way as a normal container.
I use this often when i want to have nested containers.

give to the grid-row a custom class: grid-notfull
do this to your functions.php of your child-theme:

function grid_layout_notfull(){
?>
<script>
(function($){
    $('.av-layout-grid-container.grid-notfull' ).wrap( '<div class="main_color notfullsize"></div>');
    $('.notfullsize').css({"clear": "both", "width": "100%" , "float": "left" , "position": "static" , "min-height": "100px" });
    $('.grid-notfull').css({"max-width": "1310px", "margin": "0 auto" , "padding": "0 20px"});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'grid_layout_notfull');

you have to adjust this line to your settings:
$('.grid-notfull').css({"max-width": "1310px", "margin": "0 auto" , "padding": "0 20px"});
( the padding depends on the inner padding of the grid cells (on default it is 30px – so to come to the 50px left right … )
you see what it does: it wraps the grid-container with a div that has the attributes of a color-section.
it has on that the background-color on default from main_color – you can overwrite that with css

I’m not sure what you want to achieve.
Do you have a link where I can have a look?

do you mean by back button the darkend background besides the lightbox?
there are alot of parameters you can set – but i have no clue what you try to achieve.
http://dimsemenov.com/plugins/magnific-popup/documentation.html#key

you can f.e. influence the
closeOnBgClick
by : false ( Close the popup when user clicks on the dark overlay )

i am a participant here like you, and i actually look regularly at the posts i have responded to, but sometimes contributors also take a lot of time to modestly express their positive or negative contribution. ( In most cases, however, only negative feedback is given. )
That was not the case with you now, but there was a positive feedback, so I thought the case was done.

this is something i really miss about the board software here: private messages.
this would be very easy to solve if he could send me a message