Farbe Umrandung ändern

Kann mir Jemand einen Tipp geben, ich bemühe mich gerade die Randfarbe meiner Umrandung zu ändern, siehe Anlage. Wenn man mit Maus hovert, dann soll sie dunkelgrau werden, dies stellt man normalerweise im Theme Zerif Pro ein. Jetzt habe ich aber laut Anleitung die Grundfarbe mit einem CSS auf rot geändert.

#focus span:nth-child(2) .focus-box .service-icon{
border: 10px solid #da4453 !important;
}

Das funktioniert auch, aber jetzt kann ich die Hover Farbe nicht mehr ändern. Wenn ich jetzt die Theme Buttons zum ändern benutzt dann verändern sich die Striche unter den Kreisen? Aber die Farbe ändert sich nicht wenn die Maus drüber geht.

Die Seite www.budogemeinschaft.de, das Theme ist Zerif pro

 

jep läuft, Danke!
Diese Bastelei stand auf der Homepage von dem Theme http://docs.themeisle.com/article/483-how-to-add-static-color-for-our-focus-section-in-zerif und ich bin leider nciht fit genug um das hübscher zu schreiben, danke noch einmal.

 

stimmt, hatt ich wohl falsch verstanden...

 

gibt es wohl eine Möglichkeit, die Umrandung transparent erscheinen zu lassen, so dass das Hintergrundbild durchscheint wenn keine Maus rüber scrollt?

 

habe schon ein wenig gegoogelt, ich schwör! aber so richtig funktioniert es noch nicht, habe ja auch kein Bild, es ist ein Border, habe das CSS so angepasst



.focus-box .service-icon {
border: 10px solid #822932;
opacity:0.7;
}

aber dann wird der ganze Kreis nur abgedunkelt, durscheinen tut da gar nix?

folgendes nimmt er gar nicht?


.focus-box .service-icon {
border: 10px solid #822932;
border-opacity:0.7;
}

 

Danke für die Tipps, habe es ausprobiert, funktioniert, leider hat mich das Ergebnis optisch nicht überzeugt, ich muss mir noch was anderes einfallen lassen wie ich diese "Border" hübscher gestalte....

 

jetzt habe ich mich für eine Version entschieden, die nciht so auffällig ist, sprich wenn keine Maus über die Bilder zieht, sieht man den Rand erst gar nicht, jetzt stört mich nur noch, dass der Rand mein Bild einschränkt, gibt es wohl eine Möglickeit, wenn die Maus nicht auf dem Bild das komplette Bild zu sehen, ohne das der Border etwas abschneidet? Die Seite war www.Budogemeinschaft.de es geht um die Bilder unter Sportangebote

 

cool, das ist es! jetzt muss ich nur noch die Bilder neu ausrichten, besten Dank!

 

kann ich wohl den border oder die Wirkung ganz entfernen? Ich habe dies mit border-width: 0px; ausprobiert, er schneidet mir aber noch ein wenig die Bilder ab wenn ich "drüberhover", siehe http://budogemeinschaft.de/ bei Hapkido oder Karate. Wie bekomme ich das wohl weg?

 

wenn ich den css code rausnehme, dann kommt der komplette Border welcher durch das Theme eingestellt ist wieder durch, ein dicker roter Rand.

Wenn ich

#focus span:nth-child(4n+2) .focus-box .service-icon:hover {
border: 0px solid #FFFFFF !important;
}

einfüge, dann erhalte ich den aktuellen Stand von der Homepage, der macht mir die Füße kaputt wenn ich mit der Maus rüberfahre.

#focus span:nth-child(4n+2) .focus-box .service-icon:hover {
border: 0px solid #FFFFFF !important;
border-radius: 0%;
border-width: 0px;
}

Ändert nichts daran. Könnte ich keine transparente Farbe eintragen und gut ist?

Eine einfache Möglichkeit ein wenig reinzuzoomen bei hover gibt es vermutlich nicht?

 

gibt es evtl. die Möglichkeit den Border zu deaktivieren und die Grafik in SW zu verwandeln und wenn ich mit der Maus rüberfahre die Farben wieder eingeschaltet werden?

Habe ein wenig mit filter: gray; ausprobiert, habe es aber ncith hinbekommen

 

mit filter: grayscale(100%); scheint sich da was machen zu lassen? Ich nutze chrome

 

mit dem entfernen der Farbe funktiniert es jetzt, aber der Border schneidet mir noch die Füße ab?