Bild beim hover in den Vordergrund?

Guten Abend!Ich habe ein Problem, und zwar programmiere ich gerade eine Website, wenn ich über ein Bild fahre, wird es größer, soweit so gut, doch ich möchte das dieses Bilder vor den anderen Bildern steht. (wenn möglich ohne jquery)

css:.bild:hover{-webkit-transform:scale(1.2);transform:scale(2);}.bild {-webkit-transition: all 0.7s ease;transition: all 0.7s ease; }Ich würde mich sehr über eine Antwort freuen!Danke im Vorraus

3 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

MooKuh

04.08.2017, 05:45

Musst nur den z-Index beim :hover auf z. B. 1 setzen und bei den nicht hover images auf 0. Achte darauf, dass du auch Position:relative; vergibst, sonst kann der z-Index nicht greifen, soweit ich weiß.

tavkomann

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, programmieren

03.08.2017, 22:15

Wie meinst du das?

https://jsfiddle.net/2wLyf8mk/1/

Es ist doch schon vor den anderen? Willst du einen Schatten hinzufügen?

https://jsfiddle.net/2wLyf8mk/3/

Oder was genau ist das Problem?

tavkomann

03.08.2017, 22:43

Kannst du bitte die jeweiligen Codeabschnitte bei hastebin.com posten?

dashausistblau

Beitragsersteller

05.08.2017, 08:35

@tavkomann

Hab die Lösung bereits, aber danke.

dashausistblau

Beitragsersteller

03.08.2017, 22:27

Danke, genau so wie bei deinem ersten soll es sein, aber bei mir wird es hinter den andern Bildeen groß.

Dory1

03.08.2017, 23:16

Versuch mal folgendes:

.bild {
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}
.bild:hover {
  -webkit-transform: scale(1.2);
  transform: scale(2);
  border: 1px solid red;
  position: relative;
  z-index: 1;
}

Ähnliche Beiträge

CSS rollender Ball mit Bild?

Guten Tag,

ich habe in CSS einen rollenden Ball programmiert. Dieser rollt auch ist aber unsichtbar obwohl ich ein background: url gesetzt habe.

.circle {
    display: block;
    width: 100px;
    height: 100px;
    background: url("logo.png");
    border-radius: 50%;
   
    -webkit-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    -moz-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    -ms-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    
    position: absolute;
    left: 0;
  }

Das Bild gibt es und die Rotation auch, ist aber nicht wichtig.

...zum Beitrag

Hover von links nach Rechts einblenden lassen?

Wie kann man den Hover mit css von links nach Rechts einblenden lassen ?

Also am besten mit webkit-transformation.

...zum Beitrag

CSS Hover Animation "einmalig"?

Hallo, ich möchte eine :hover transition so einstellen, dass wenn sie einmal getriggert wurde nicht mehr gestoppt wird einfach bis zum Ende läuft und dann so bleibt. Wie realisiere ich das am einfachsten? LG

...zum Beitrag

CSS3-Keyframe-Aninationen bei mouseout rückgängig machen?

Hi, ich habe diese Keyframe-Animationen in CSS gemacht:

nav:hover #strich1 {
    animation: strich1 0.5s ease-out 0s 1 normal forwards;
}
nav:hover #strich2 {
    animation: strich2 0.5s ease-out 0s 1 normal forwards;
}
nav:hover #strich3 {
    animation: strich3 0.5s ease-out 0s 1 normal forwards;
}
@keyframes strich1 {
    from {
        transform: rotate(0deg);
        width: 24px;
    }
    to {
        transform: rotate(45deg);
        width: 30px;
    }
}
@keyframes strich2 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes strich3 {
    from {
        transform: rotate(0deg);
        width: 24px;
    }
    to {
        transform: rotate(-45deg);
        width: 30px;
    }
}

möchte ihr allerdings auch, dass sie sobald die Maus den Navigationsbereich(<nav>) wieder verlässt die Animationen wieder rückwärts ablaufen, weiß allerdings noch nicht so ganz wie. Ich habe es bereits so versucht:

nav:not(:hover) #strich1 {
    animation: strich1 0.5s ease-out 0s 1 reverse forwards;
}
...

und so:

nav #strich1 {
    animation: strich1 0.5s ease-out 0s 1 reverse forwards;
}
...

Hat allerdings beides nicht den gewünschten Effekt gebracht. Wisst ihr wie ich das machen könnte? Gibt es vllt eine Art Gegenteil-Pseudoklasse zu :hover? Wisst ihr da Abhilfe? Ansonsten hatte ich mir noch überlegt mit JavaScript nach dem feuern des mouseout events die Animation rückgängig zu machen wenn das mit CSS gar nicht geht.

...zum Beitrag

CSS, mehrere Transitions?

Hallo, wie kann ich, wenn ich einen Button habe, auf dem ich die Opacity in der Pseudoklasse Hover in einer Transition von 2ms ändern möchte, die Opacity von der Pseudoklasse Active in einer anderen Transitionzeit ändern? Wenn ich transition: opacity 2ms schreibe, wird das sowohl für hover als auch active angewendet, aber ich möchte jeweils unterschiedliche Transitionzeiten haben. Also auf active z.B. 1ms. Ich kann die Transition auch nicht in die jeweilige Pseudoklasse schreiben, da die Transition aufhört, sobald man beispielsweise vom Button runterhovert.

...zum Beitrag

Wie kann man bei HTML einen Hover Effekt für Bilder erstellen wo der Text hervorscheint?

Hallo, Ich bin grade dabei ein Portfolio zu Programmieren und habe Probleme damit Hover Effekte zu erstellen. Meine Frage ist wie kann man bei HTML einen Hover Effekt für Bilder erstellen so dass wenn man über das Bild hovert das der Text zum Vorscheinen kommt.?

So wie auf dieser Seite: http://themes.pixelwars.org/responsy-wp/portfolio/#prettyPhoto

Vielen dank schon mal im voraus. LG. Lacadio

...zum Beitrag

Warum ist da ein weißer Rand?

Hey, ich habe eine Frage zu HTML.

Ich habe bis jetzt diese Navigationleiste erarbeitet, weiß jedoch nicht wieso dort ein weißer Rand ist?

Könnt ihr mir helfen?

Das ist der HTML Code:

<nav id="nav">
<ul>
<li class="current" style="white-space: nowrap;">
<a href="">Home</a>
</li>
<li style="white-space: nowrap;">
</li>
<li style="white-space: nowrap;">
<a href="">Neumöbellogistik</a>
</li>
<li style="white-space: nowrap;">
<a href="">Lager & Logistik</a>
</li>
<li style="white-space: nowrap;">
<a href="">Werkstatt</a>
</li>
<li style="white-space: nowrap;">
<a href="">Kontakte</a>
</li>
</ul>
</nav>

----------------------------------------------------------------------------------------------------------------------------------

Und das der CSS code:

#nav {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: rgba(255, 255, 255, 0.95);
background-image: url("C:\Users\liam\Desktop\CT\Headerline.png");
width: 100%;
height: 3.25em;
line-height: 3.25em;
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
text-transform: uppercase;
cursor: default;
}
#nav ul {
position: relative;
z-index: 1001;
}
#nav li {
display: inline-block;
top: 0;
position: relative;
-moz-transition: top .15s ease-in-out;
-webkit-transition: top .15s ease-in-out;
-o-transition: top .15s ease-in-out;
-ms-transition: top .15s ease-in-out;
transition: top .15s ease-in-out;
}
#nav li > ul {
display: none;
}
#nav li a, #nav li span {
-moz-transition: background-color .075s ease-in-out, color .075s ease-in-out;
-webkit-transition: background-color .075s ease-in-out, color .075s ease-in-out;
-ms-transition: background-color .075s ease-in-out, color .075s ease-in-out;
transition: background-color .075s ease-in-out, color .075s ease-in-out;
position: relative;
display: block;
text-decoration: none;
color: #6b7770;
top: -6px;
padding: 6px 1.5em 0.25em 1.5em;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
outline: 0;
}
#nav li:hover, #nav li.active {
top: 3px;
}
#nav li:hover a, #nav li:hover span {
background: #C1CAC5;
color: #fff;
}
#nav li.active a, #nav li.active span {
background: #C1CAC5;
color: #fff;
}
#nav li.current a {
background: #b1ddab;
color: #fff;
}

----------------------------------------------------------------------------------------------------------------------------------

Ich hoffe ihr könnt mir helfen!

...zum Beitrag

Wie kann ich ein Bild verkleinern und verschieben (Html, css)?

Ich programmiere eine Website. Und ich muss ein bild in der Mitte, oben platzieren.

...zum Beitrag

HTML/CSS-Button(Bild ändern)?

Hallo, ich arbeite gerade an einen Button. Aber wie kann ich dieses Herz durch ein Bild ersetzten?

.icon{

background-color: white;

color: #00472d;

border: none;

font-size: 2rem;

padding: 0.5em;

line-height: 1;

width: 2em;

transition: border-radius 2s ease;

}

.icon:hover{

background-color:#00472d;

color: white;

border-radius: 50%;

...zum Beitrag

HTML / CSS Transition funktioniert nicht?

Hallo,

wie man oben lesen kann funktioniert die Verzögerung eines hover Effekts nicht. Egal was ich probiere der hover Effekt hat keine Verzögerung. Hier der Code, der verzögert sein soll:

{ width: 339px; height: 191px;

position:absolute;
z-index:13;
right: 65%;
bottom: 225px;
position: fixed;
background-image: url(../Bilder/C-ProgrammUn.png);

} #C:hover { background-image: url(../Bilder/C-Programm.png); }

Sorry falls unübersichtlich ist, GuteFrageNet matscht das leider.

Kann mir wer helfen? :D

Mfg TOminerTV

...zum Beitrag

html/css Bild um 180° drehen und andere bild anzeigen?

Hey Leute, ich möchte auf meiner Website ein Bild mit dem :hover Befehl um 180 grad drehen und dann ein anderes Bild anzeigen lassen. Wie ich das Bild um 180 grad drehe ist ja nicht die Schwierigkeit, das Problem ist das ich nicht weiß wie ich ein anders Bild angezeigt bekomme...

...zum Beitrag

Hilfe beim Programmieren?

Hallo,

Ich bin Anfänger beim Programmieren mit Javascript css und html

Ich möchte gerade mit dem :hover Effekt einen Buchstaben vergrößern. Wenn sie dieser Buchstaben aber vergrößert verschiebt er die anderen Buchstaben. Was muss ich machen damit das nicht passiert?

...zum Beitrag

HTML CSS Hover Animation?

Hallo. Ich versuche eine eigene Website zu erstellen mit HTML und CSS. Nun bin ich auf ein Problem gestoßen. Ich versuche seit langem eine Hover Animation auf ein Text einzufügen. Den CSS Code habe ich von der Webseite ui-snippets.dev . Ich bekomme die Hover Animation nicht zum Funktionieren. Die Animation kommt nur wenn ich beim content ein Text eingebe. Dann ist aber die Animation viel zu groß, da die große vom eingegeben Content Text benutz wird.

Bilder vom Code im Anhang.

...zum Beitrag

CSS: Wie kann ich die Unterlinie des Texts wegbekommen?

Hallo. Irgendwie geht die text-decoration bei mir nicht weg. Bitte helft mir.

HTML:

 <button class="cn"><a href="#">create</a></button>

CSS:

.cn {
  text-decoration: none;
  width: 160px;
  height: 40px;
  background: #23002f;
  border: none;
  margin-bottom: 10px;
  margin-left: 20px;
  font-size: 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: .4s ease;
  margin-left: 350px;
  margin-top: 5px;
}

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen