Hoe kan ik een 'image overlay' maken zoals op de website Etsy?

[vvanasperen]

Goedemiddag,

Op de website Etsy staan als je naar een categorie toe gaat allemaal plaatjes. Als je hier met je muis over heen gaat verschijnt een soort van overlay over het plaatje met wat mogelijkheden. Onder andere de mogelijkheid om het item aan je favorieten toe te voegen. Hoe doe je dit? Is hier een specifieke code of (java)script voor dat je kunt gebruiken? Uiteindelijk is het mijn bedoeling een verzamelaars site te maken waarbij de overlay dus een mogelijkheid geeft om een item aan je verzameling toe te voegen of aan je wensenlijstje, etc.

Image normaal


Image met overlay



Groeten Vincent

 

[mastermindzh]

Pak als html code:

<ul>
    <li>
        <div class="image"><img src="http://mi-soft.nl/images/SQUARE.png"/></div>
        <div class="overlay">
            <a href = "#"> 1 </a>
            <a href = "#"> 2 </a>
            <a href = "#"> 3 </a>
        </div>
    </li>
     <li>
        <div class="image"><img src="http://mi-soft.nl/images/SQUARE.png"/></div>
        <div class="overlay">
            <a href = "#"> 1 </a>
            <a href = "#"> 2 </a>
            <a href = "#"> 3 </a>
        </div>
    </li>
     <li>
        <div class="image"><img src="http://mi-soft.nl/images/SQUARE.png"/></div>
        <div class="overlay">
            <a href = "#"> 1 </a>
            <a href = "#"> 2 </a>
            <a href = "#"> 3 </a>
        </div>
    </li>
    
</ul>

Als css:

.image{
     width:100px;
     height:100px;    
}
.overlay{
    width:100%;
    height:100%;
    display:none;
    position:absolute;
    top:0px;
    left:0px;
}

.overlay a{
   float:right;
   margin:5px;
}

ul {
  list-style: none; 
  width: 100%; 
}
ul li { 
  position:relative;
  display:inline-block; 
  width:150px;
  height:150px;}

li:hover .overlay {
    display:block;
    background-color:#cecece;
    opacity:0.75;
}

De 3 links zijn de 3 "knoppen" , ik heb 1 foto 3 keer gebruikt om meerdere verzamelobjecten te emuleren.

U kunt een voorbeeld zien op: http://jsfiddle.net/8kga7aLx/

 

[vvanasperen]

Goedenavond Rick,

Allereerst, bedankt voor je reactie. Het lijkt me dat dit wel zou kunnen werken, maar ik ben op zoek naar de techniek om het juist op die specifieke Etsy manier te doen. Om je een nog wat beter beeld te geven. Als je met je muis over de items gaat, dan krijg je dus de mogelijkheid om het aan je favorieten toe te voegen of op een eigen lijstje te zetten. Als je op het hartje klikt dan zie je een laadsymbool en kleurt het hartje rood. Als je dan weer een keer met je muis over het item gaat blijft het hartje rood en staat dit item ook bij je favoriete items op je eigen pagina. Als je nogmaals op het hartje klikt is het item verwijderd uit je favorieten en niet langer rood. Als je op het lijst symbooltje klikt, dan krijg je eerst de keuze om een lijst aan te maken of een bestaande lijst te kiezen. Als je dat hebt gedaan kleurt ook dit icoontje en blijft gekleurd als je weer over het item gaat. Als je nogmaals op het lijst symbooltje klikt dan krijg je de keuze om de lijst te unchecken en is het item van de lijst en icoontje weer ongekleurd.

In afbeeldingen is het zoals hieronder:

1) Klik op hart icoontje
Laden en op de achtergrond toevoegen van item aan favorieten pagina


2) Hart icoontje geklikt
Hartje is gekleurd en blijft gekleurd tot je de favoriet verwijderd door er nogmaals op te klikken


En...

1) Het lijst icoontje
Klikken geeft een optie schermpje waar je een lijst kunt kiezen


2) Klik op lijst icoontje
Laden en op de achtergrond wordt item aan lijst toegevoegd


3) lijst icoontje geklikt
Het lijst icoontje is gekleurd en blijft gekleurd tot je het vinkje bij de gekozen lijst weer weghaald


Het zou ook goed kunnen dat bovengenoemde iets van een add-on of een voorgeprogrammeerde code is. Maar ik zou het graag wel juist zo willen creëren.

Groeten Vincent

 

[mastermindzh]

Dat gaat mij met de gegeven gevens onmogelijk lukken. Waar worden de lijstjes opgeslagen ? (database neem ik aan?) Waar worden favorieten opgelsagen (cookie? of ook database, database lijkt me handiger) etc. etc.

Ik heb je met mijn vorige post een mooie opzet gegeven om de rest zelf uit te werken, ik laat daar met de css precies zien hoe u een overlay kunt maken (met klikbare items erop), nu lijkt het mij dat u deze zelf wel kunt aanpassen om van die tekst een icoontje te maken etc.
Het enige wat dan nog rest is een roep naar de database.

 

[vvanasperen]

Rick,

Nogmaals bedankt voor jou uitleg en code. Ik zal eens kijken of ik iets in elkaar kan sleutelen. Laat deze vraag in de tussentijd echter nog wel op open staan. ;-)

Groeten Vincent