Wie in CSS img source ändern?

Hey:)
Ich habe hier ein Profilbild das rot ist.
<img src=“avatar.png” class=“avatar”>
und es soll gelb werden bei .avatar:hover

Habe deshalb das Selbe Bild nochmal in gelb mit dem namen avatar2.

Wie kann ich das jetzt machen?
.avatar:hover{
src: url(“avatar2.png”);
}
geht leider nicht und ja, die bilder sind im gleichen ordner;/

Danke für Hilfe❤️

1 Antwort

Vom Beitragsersteller als hilfreich ausgezeichnet

tavkomann

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, CSS, Webdesign

14.12.2018, 21:56

Es existiert keine Möglichkeit mit guter Browserkompatibilität, um Bilder mit CSS zu ändern. Deshalb schlage ich vor, mit Hintergrundbildern zu arbeiten. Dazu erstellst du einen Wrapper für dein Bild:

<div class="avatar-wrapper">
  <img src=“avatar.png” alt="Avatar" class=“avatar” />
</div>

Anschließend weist du dem Wrapper ein Hintergrundbild zu, welches zunächst jedoch durch das eigentliche Bild verdeckt ist:

.avatar-wrapper {
  display: inline-block;
  background-image: url(avatar2.png);
}

Beim Hovern verbirgst du nun das vordere Bild, indem du es transparent machst:

.avatar-wrapper >.avatar:hover {
  opacity: 0;
}

Zudem ist noch folgender Fix erforderlich:

.avatar-wrapper > .avatar {
  vertical-align: top;
}

Hier ein Live-Beispiel: https://jsfiddle.net/w2x3tsz0/

Ähnliche Beiträge

HTML und CSS Imagetag Unterschiede?

Warum nutze ich im HTML img Tag "src" und im CSS "url"?

Also die technischen Unterschiede verstehe ich, aber warum kann ich im CSS nicht mit SRC arbeiten, wo meine Bilddatei doch im Webspace liegt?

...zum Beitrag

Wie löse ich das Problem mit dem Bildaustausch (hover, etc.)?

Hallo,

ich versuche in CSS ein Hintergrundbild auszutauschen bei hover, active, etc.
Leider klappt es aber nicht, da bei besuchten Links dennoch das Hintergrundbild angezeigt wird, welches aber nur angezeigt werden soll, wenn der Link noch nicht geöffnet wurde.

So sieht der Code aus (body):

<div>
      <ul>
        <li><a href="xyz" class="img-link" title="xyz">xyz</a><br/></li>

Bei der Klasse in css habe ich es dann so probiert:

a.img-link{
  display: inline-block;
  background: url(../img/li-button-blue.png);
  margin: 0 auto;
  text-align: center;
}
a.img-link:visited {
  background: url(../img/li-button-yellow.png);
}
a.img-link:hover {
  background: url(../img/li-button-red.png);
}
a.img-link:active {
  background: url(../img/li-button-lightblue.png);
}
a.img-link:focus {
  background: url(../img/li-button-green.png);

Vielleicht kann ja jemand helfen, ist wahrscheinlich total einfach.

Vielen Dank.

...zum Beitrag

Warum funktioniert mein @font face nicht?

Ich steh auf dem Schlau, erkennt einer das Problem?

Mein Fontface css:

@font-face {
    font-family:"Conduit-Medium";
    src: url('fonts/Conduit-Medium.eot');
    src: url('fonts/Conduit-Medium.otf') format('opentype');
    font-style: normal;
}

Mein css Kopf:

body {
    background-repeat: no-repeat;
    background-color: #009ee3;
    font-family: "Conduit-Medium", serif;
}

...zum Beitrag

Html / Css Wie füge ich die Headline gut ein?

Guten Tag, und zwar habe ich vor paar Tagen mit den erlernen von Html / Css begonnen. Und hätte halt die Frage wie ich die Headline gut einsetzten kann bzw wie ich denn Code ändern muss.

Das ist mal der Code und wie muss ich den ändern dass ich beim Roten fleck die Headline reinbekomme ohne dass sich die 4hrefs sich wegbeweggen.

Falls es noch Fragen gibt bitte Fragen, Vielen Dank schon mal im Vorraus :)

...zum Beitrag

JavaScript Canvas Bilder werden Komisch angezeigt, Lösung?

Hallo,

ich bastele gerade mit dem HTML5 Canvas herum und möchte dort mit JavaScript ein Bild anzeigen, dies Funktioniert auch allerdings werden sie sehr komisch angezeigt, meist zu groß oder verschwommen hier der JavaScript code:

"function drawImage(url) {

var img = new Image();

img.onload = function () {

ctx.drawImage(img,10, 10, 35, 35);

}

img.src = url

hier habe ich schon mit den drawImage Parametern rumgespielt um es anzupassen allerdings kam kein gutes Ergebnis heraus...

Hier noch die canvas daten: width: 900px; height: 700px;

diese habe ich mit CSS angegeben.

Schonmal vielendank für eure Hilfe!

...zum Beitrag

Bild in CSS formatieren?

Hallo,

ich habe ein kleines Problem:

Auf meiner Webseite gibt es ganz oben ein Bild, welches mit

background-image:

gesetzt wird. Doch es wird nicht der obere leere Linke Rand angezeigt. Kann ich das Bild irgentwie kleiner machen damit alles angezeigt wird? Z. B.:

background-image: 200px 200px url(“../img/image.jpeg”)

...zum Beitrag

css code für profilbilder?

weiss jemand was an diesem code falsch ist, da er nicht funktioniert! Er soll die Ränder vom Profilbild rund machen, wenn man mit der maus rüber fährt.

der code ist: /* Grundlegendes Styling für das Profilbild */

.profile-container {

display: inline-block;

overflow: hidden; /* Verhindert, dass das Bild über den Container hinausgeht */

}

.profile-img {

width: 100px; /* Standardgröße des Profilbildes */

height: 100px;

object-fit: cover; /* Bild so skalieren, dass es den gesamten Container ausfüllt */

border-radius: 10px; /* Anfangs leicht abgerundete Ecken */

transition: border-radius 0.3s ease, transform 0.3s ease; /* Weicher Übergang für den Hover-Effekt */

}

/* Effekt bei Hover */

.profile-img:hover {

border-radius: 50%; /* Vollständig runde Ecken beim Hover */

transform: scale(1.05); /* Leichtes Vergrößern des Bildes */

}

...zum Beitrag

Hintergrund bild im header wird nicht angezeigt?

Hallo, ich will in meine Html Website ein Bild als Hintergrund im Header haben, dies geht nicht, ich habe schon mehrmals gegoogelt und verschiedene Codes probiert, aber wenn ich die Seite aktualisiere bleibt sie weiß, und sagt, dass das Bild nicht gefunden werden konnte, obwohl ich es im gleichen Ordner habe wie meine Index und CSS Datei. Wisst ihr einen Rat? Danke im Voraus.

hier der Css Code:

.header{

min-height: 100vh;

width: 100%;

background-image: /*linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),*/ url(Website4/Dateien/Bilder/12.png);

background-position: center;

background-size: cover;

position: relative;

overflow: hidden;

}

...zum Beitrag

CSS Image wird nicht angezeigt?

CSS:
.top-banner {
  width: 100%;
  height: auto;
  background-size: contain;
  background: url("../img/start.jpg") no-repeat;
}

HTML:
 <div class="top-banner"></div>

Das Bild soll responsive angezeigt werden. Es liegt an dem height: auto;

gebe ich zum Beispiel eine feste height von 400px, wird es wieder angezeigt, ist aber natürlich nicht responsiv.

Gibt es da eine andere Möglichkeit, ein Image anzuzeigen, welches mitskaliert?

...zum Beitrag

Bilder auf gleiche Höhe in HTML/CSS?

Hallo,

ich habe nochmal eine Frage zu meiner Website.

Kann mir jemand sagen, wie ich die beiden linken Bilder auf die gleiche Höhe wie das rechte Bild bringen kann? Ich finde bei Google nichts und weiß nicht weiter.

Hier der Ausschnitt meines Codes:

HTML:

<div id="bilder">
  <div id=bild1>
    <img src="bild1.jpg" alt="Wir bei der Arbeit">
  </div>
  <div id=bild2>
    <img src="bild2.jpg" alt="Wir bei der Arbeit">
  </div>
  <div id=bild3>
    <img src="bild3.png" alt="Holzschränke"
  </div>

CSS:

#bild1 {
  display: inline;
  margin-left: 500px;
}

#bild2 {
  display: inline;
  margin-left: 50px;
}

#bild3 {
  display: inline;
  margin-left: 50px;
}

...zum Beitrag

CSS background gif UND background color?

Halloo, Eine Frage zu CSS, wie man im Titel schon erkennen kann :)

Undzwar habe ich folgendes Programm geschrieben:

html, body {
 margin: 0;
 padding: 0;
}

.hintergrund {
 background: url(bla.gif) no-repeat center center;
 background-size: cover;
 height: 350px;
 text-align: center;
}

So, mein Wunsch wäre es unter dem Gif noch die Hintergrundfarbe zu ändern.. Weiß jmd wie das funktioniert?

...zum Beitrag

Dynamic Web App und Thymeleaf CSS einbinden?

Moin.

Statt JSP wollte ich ich nun Thymeleaf umschwenken. Allerdings hab ich bei Thymeleaf Probleme, die CSS Datei einzubinden. Meine Recherchen haben ergeben, dass Thymeleaf von Haus aus in src/main/resources/static/ nach Ressourcen sucht. Die hab ich auch da reingepackt. css/style.css

Mein HTML Dokument sieht die Verlinkung Folgendermaßen aus:

 <link th:href="@{/css/style.css}" rel="stylesheet" />

Meine HTML Seite befindet sich direkt im webapp Ordner.

Ich hab auch versucht die HTML Seite in den templates Ordner zu packen. Leider ebenfalls ohne Ergebnis.

Pro Forma der CSS Inhalt :)

body{
	background-color: red;
}

Hier auch mal ein Bild von der Ordnerstruktur:

...zum Beitrag

HTML mit CSS verknüpfen Probleme?

Hallo Zusammen. Ich mache gerade eine Webseite. Ich habe dabei mehrere HTML Seiten und eine CSS seite. Ich hatte die HTML seiten und die CSS seite in einem grossen ordner, nun habe ich die seiten in unterordner getan, um Ordung zu schaffen. 1. gibt es denn HTML Ordner mit allen HTML Seiten drin, zweitens den CSS Ordner mit dem CSS File und letztens denn Pics Ordner mit den Bildern.

Nun geht auf der Seite wenn ich sie lokal aufrufe das CSS nicht mehr. Ich habe schon alles versucht, den cache de browsers geleert und nochmal alles gespeichert. Auch habe ich versucht den Pfad des CSS mit einem Slash vordrann anzugeben, oder ohne, aber alles hilft nichts. Kann mir da jemand helfen?

Hier die Bilder des Codes und der Website:

Das CSS:

Der HTML Code. Rot ist der Pfad zum CSS und Blau die Ordnerstrucktur.

Die Website, wie man sieht ohne CSS

...zum Beitrag

Checkbox Farbe ändern bei onclick JavaScript/CSS?

Wie ändere ich die Farbe der Checkbox ?

Bei mir ist standartmäßig der background in einem blauton und der haken weiß.

Habe schon versucht zu googeln und dort stand das eine input type=checkbox kein richtigen hintergrund hat. Ist es nicht irgendwie möglich die Farbe bei "checked" grün zu stellen und beim nicht klicken rot.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen