Joomla!NL - slideshow met als overlay een deels transparante .png

slideshow met als overlay een deels transparante .png

12 mrt 2015 23:08

#1

Hallo forumleden,

Voor een J3 site zoek ik een slideshow extensie waarbij het mogelijk is om een transparante .png als overlay te gebruiken.
Helemaal geweldig als dit ook nog eens responsive is. Eventeel met overrides te bereiken ook geen probleem, maar beetje hulp in juiste richting is zeker welkom. Iemand goede tips?

Mvg, Erik.

T-cue
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 8

slideshow met als overlay een deels transparante .png

13 mrt 2015 10:26 - 13 mrt 2015 10:26

#2

Wat bedoel je precies? Je zou ook een aangepaste html module op dezelfde positie kunnen zetten, er een module class suffix aan toe kunnen voegen en deze met css op de juiste plaats kunnen zetten. Maar dat kan alleen als je maar 1 .png bestand wilt tonen.

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37456

slideshow met als overlay een deels transparante .png

14 mrt 2015 13:17

#3

Beste Astrid,

Bedankt voor je reactie. Dit is misschien wel een goed idee. Het is mijn bedoeling om 1 .png als aangepaste border over de slideshow te zetten. de border zal groter zijn dan de slideshow. Zeg border image 100% en de slideshow er achter 80% qua grootte, maar de boel moet dan niet ten opzichte van elkaar gaan verschuiven op moment dat je kleinere schermen krijgt. (vandaar het responsive verhaal). De bedoeling is dat de .png dus deels over de slideshow valt met een overloop naar de rest van de template. Zie als voorbeeld de foto op de site van Amstel.nl in het scherm direct na de leeftijdscheck. Dit is puur een achtergrond, maar ik wil iets soortgelijks maken, maar dan met een slideshow funktie. Het zou natuurlijk kunnen met animated gif, maar die foto's moeten makkelijk door een derde worden aangepast zonder gelijk te moeten photoshoppen. Vandaar het idee van een slideshow met een soort van overlay, maar hoe is dit het beste aan te pakken. Ik zat te denken om bijvoorbeeld een JSN Imageshow te pakken als basis en hier een theme voor aan te passen. Maar ik weet even niet goed hoe ik dan de theme moet aanpassen. Misschien ideeën? Alvast bedankt voor het meedenken.

Mvg, Erik.

T-cue
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 8

slideshow met als overlay een deels transparante .png

14 mrt 2015 15:22

#4

Als ik begreep waar je heen wilde, dan had ik misschien een oplossing. Maar een border maak je met css en padding, dus daar zie ik het nut niet in van een transparante afbeelding. Weet je zeker dat je het in de juiste richting zoekt?

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37456

slideshow met als overlay een deels transparante .png

14 mrt 2015 15:55 - 14 mrt 2015 16:02

#5

Misschien denk ik te simpel hoor .. maar toch mijn idee:

als je de css van je slideshow hebt, kun je die kopiëren en dan de optie :after gebruiken om er een aangepaste PNG overheen te plaatsen zoals in mijn voorbeeld

http://http://www.hielke.net/test/overlay.html

HTML

Code:

<html>
<head>
<title>Testtitel</title>
<link rel="stylesheet" type="text/css" href="opmaak.css">
</head>
<body>
<div id="container">
<div class="slideshow"></div>
</div>
</body>
</html>

CSS

Code:

.container {
position:relative;
}
.slideshow {
	height: 200px;
    background-image: url('http://hielke.net/test/slideshow.png');
	background-repeat: no-repeat;
}
.slideshow:after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
    background: url('http://hielke.net/test/slideshow-overlay.png');
	background-repeat: no-repeat;
}

Resultaat

Voor

Na

Managing partner Nederland - Pixlogix.com
(KVK / CIN: U72200GJ2014PTC081526)
Ons team heeft meer dan 15 jaar ervaring in oplossingen op maat!

hielkio
Regelmatige bezoeker van Joomla!NL
Berichten: 299

Laatste nieuws

Welkom bij Joomla!NL

slideshow met als overlay een deels transparante .png

slideshow met als overlay een deels transparante .png

slideshow met als overlay een deels transparante .png

slideshow met als overlay een deels transparante .png

slideshow met als overlay een deels transparante .png

slideshow met als overlay een deels transparante .png

Laatste forumberichten

Wil je Joomla!NL steunen?