Melodyk

Na enkele uren nadenken weer geprobeerd….

Als ik deze code invoeg :
.post-thumbnail {
position: relative;
z-index: 1;
}

.post-thumbnail::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-style: solid;
border-image-slice: 50;
border-image-width: 50px;
border-image-outset: 0;
border-image-repeat: round;
border-image-source: url(“https://melodyk.nl/wp-content/uploads/2019/10/vrij.png”);
content: ”;
}

.post-thumbnail img .vrij-image {
position: relative;
width: 100%;
height: auto;
z-index: 0;
}

krijg ik dit als resultaat:
Voorbeeld met horizontale afbeelding
https://melodyk.nl/wp-content/uploads/2019/10/voorbeeld-horizontaal.jpg
Voorbeeld met verticale afbeelding
https://melodyk.nl/wp-content/uploads/2019/10/voorbeeld-verticaal.jpg

Je ziet dus bij de horizontale versie dat de rand alleen maar over de onderrand heengaat en niet over de bovenzijde en zijkanten

Je ziet dus bij de verticale versie dat er witruimtes ontstaan links en rechts van de afbeelding en dat de randen boven en onder dus niet over de afbeelding heen gaan zoals dat zou moeten…

(ik word er moedeloos van onderhand… doe ik iets verkeerds of wil ik iets dat niet mogelijk is?)

Hallo Ronald

Allereerst heel veel dank voor je hulp tot dusver.

Ik heb nu weer een hele tijd zitten stoeien met bovenstaande uit jouw antwoord maar krijg het simpelweg niet voor elkaar…

De afbeelding die ik als omranding wil is: https://melodyk.nl/wp-content/uploads/2019/10/dizze.png

Maar als ik jouw tips toepas valt het alsnog achter de afbeeldingen die ik als uitgelichte afbeeldingen heb geupload en die vallen bovendien veel kleiner uit…

Kortom, ik zal wel te blond zijn en ik weet nu even niet hoe verder…

Als ik jouw code gebruik… en aanpas met de juiste gegevens

.post-thumbnail img, .dizze-image-container {
position: absolute;
z-index: 1;
}

.post-thumbnail img, .dizze-image-container::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-style: solid;
border-image-slice: 50;
border-image-width: 50px;
border-image-outset: 0;
border-image-repeat: round;
border-image-source: url(“https://melodyk.nl/wp-content/uploads/2019/10/dizze.png”);
content: ”;
}

.dizze-image-container .dizze-image {
position: relative;
width: 100%;
height: auto;
z-index: 0;
}

Dan komt het al aardig in de buurt van wat ik wil … op 2 dingen na

1) uitgelichte afbeeldingen worden enorm verkleind
2) uitgelichte afbeeldingen schuiven in elkaar / over elkaar heen…
zie printscreen https://melodyk.nl/wp-content/uploads/2019/10/ps1.jpg

En de rand die ik wel zie verschijnen is veel te smal, zou dus breder moeten

Hallo Richard

Dank je wel voor je reactie… dat is allemaal begrijpelijk, zo ver was ik ook al gekomen na veel zelf zoeken en puzzelen…

De afbeeldingen in de voorbeelden zijn niets meer dan dat, voorbeelden.

Ik ontdekte dat het zou kunnen lukken met position: aboslute en dan z-index maar dan is de weergave op de pagina niet goed omdat alles uitgelichte afbeeldingen dan over elkaar heen schuiven met een aan de bovenkant zo’n grofweg geschat 200 pixels verschil… kortom dan is de uitgelichte afbeelding maar deels te zien en het deel eronder tot aan het begin van de volgende uitgelichte afbeelding valt er dan onder… en dat moet uiteraard niet…

Hallo Jeroen

Jah dat zou kunnen als ik wist hoe / waar ik dat moest doen…

Ik heb het probleem echter op een andere wijze gevonden.
Het werd veroorzaakt door de plugin WP Fastest cache…
Die heb ik nu verwijderd en het werkt zoals het hoort.

Evengoed uiteraard wel bedankt voor je reactie.

Hallo Antonie, bedankt voor je reactie en excuses voor mijn late terugreageren, had t ff te druk…

Bijna alle widgets op http://melodymusic.nl zijn tekstwidgets, (op Cat. Arch. Comments en Subscr na)

Dat was jij benoemt ken ik wel vanuit de gratis wp-omgeving maar niet vanuit de omgeving van selfhosted. Ik had dat zelf ook al bedacht maar kon dat dus niet toepassen.

Ik heb je 2e tip uitgeprobeerd en dat lijkt te werken, ga ik dus toepassen voortaan, dank je wel !