Hallo.
Ich baue gerade eine responsive grid gallery und habe einen (Gold)Rahmen mit einem transparenten Mittelteil (.png) als Bild im html Teil.
Entwurf hier: http://torschaenke-dudeldorf.d…iniaCaye/test/bilder.html
Als Hintergrundbild habe ich eine kleine Vorschau die mit Hilfe von transition und transform animiert wird.
<code>
.work1 {
background-clip: content-box;
background-image: url('thumbslatte37.jpg');
background-size: cover;
background-position: left;
}
.work1:hover {
background-position: right;
transition: background-position 10s;
}
.work2 {
background-clip: content-box;
background-image: url('thumbslatte372.jpg');
background-size: cover;
background-position: left;
}
.work2:hover {
....
.work3 {
....
background-image: url('thumbslatte63.jpg');
....
.work3:hover {
.....
.work4 {
.....
background-image: url('thumbslattewenigerSchattenLow.jpg');
....
.work4:hover {
....
</code>
Meine Frage ist zur Effizienz bzw. Performance dieser Konfiguration:
Ich habe in der css Datei für jedes Backgroundbildchen eigenes Script und im html Teil immer den gleichen Rahmen. Kann man da nicht noch optimieren?