Hinzufügen eines umrissenen Herzsymbols zum Symbolisieren eines Favoriten über einem Bild, der beim Klicken und Überschreiben ausgefüllt wird

Question

Ich habe eine Liste von Bildern, auf die Benutzer klicken und sie zu ihren Favoriten machen können.

Wie füge ich dem Bild eine zusätzliche Ebene hinzu, so dass es ein umrissenes Herzsymbol in der Ecke hat, wenn es mit der Umrissfarbe gefüllt wird, und wenn es angeklickt bleibt, weil es jetzt ein Favorit ist?

Answer 1

Wenn Sie Ihrem Bild eine zusätzliche 'Ebene' hinzufügen möchten, verwenden Sie den Wrapper/Container und zielen Sie darauf. z.B.

<div class="img-wrapper"><img src=""></div> 

Damit Sie nutzen können: vor und: nach Elementen

.img-wrapper { 
    position: relative; 
} 

.img-wrapper:before { 
    display: block; 
    content: ""; /* you can have a font here for your icons */ 
    background-image: url(); /* or you could use a background image */ 
    position: absolute; 
    width: icon height; 
    height: icon height; 
    top: XX; 
    left: XX; /* or right */ 
    z-index: 1000; /* make sure it sits above your image */ 
} 

das Symbol zu ändern, verwenden Sie: auf der Verpackung schweben und JS verwenden, um eine Klasse hinzuzufügen, wenn der Benutzer die Klicks

img

.img-wrapper:hover:before { 
    content: "" /* change icon or */ 
    background: url"" /* image */ 
} 

/* If user clicks on image, add active class that changes the icon to the liked version */ 
.img-wrapper.active { 
    content: "" /* change icon or */ 
    background: url"" /* image */ 
} 

eine Klasse mit jQuery Hinzufügen: https://api.jquery.com/addclass/