image hover

<--steph--> · #1 (**permalink**) 13.10.2012, 14:36

OK ... ich weiß es gibt schon einige Beiträge zum Hovern,

aber in meinem html/css bekomme ich das irgendwie nicht hin, obwohl ich meine, dass ich das richtig angehe

HTML-Code:

<div class="bildmenue">

 <ul class="Orte">
         <li>
                 <a class="koala" href="steak.html"><img src="Koala.jpg" alt="image" /></a>
                 <div class="box">
                 <h3>La Fortuna</h3>
                 <p>La Fortuna ist ein schöner Waldabschnitt</p>
                 </div>
         </li>

CSS:

Code:

 div.bildmenue a img {
                padding: 0px;
                width: 20em;
                height: 13em;
                vertical-align: bottom;
        }

        div.bildmenue a img:hover {
        background-image: #fff;
        }

Hat jemand einen Tipp. am End möchte ich erreichen, dass das Bild in einer Farbe überdeckt wird und später noch mit opacity: 50%; durchsichtig machen.

BG

fricca · #2 (**permalink**) 13.10.2012, 15:35

Zitat:

Zitat von <--steph-->

am End möchte ich erreichen, dass das Bild in einer Farbe überdeckt wird und später noch mit opacity: 50%; durchsichtig machen.

Ich verstehe nicht, was du meinst. Wenn das Bild von einer Farbe überdeckt wird, dann sieht man doch nichts mehr davon? Und was heißt "später"? Soll das eine Animation werden?
Davon abgesehen: Dein Codeschnipsel enthält keine Angabe zur Opacity, nur einen ungültigen Wert für background-image.

Bitte: Mit diesen Codeschnipseln kann man keine Probleme nachvollziehen, schon gar nicht, wenn es um Bilder geht. Poste immer einen Link zum Problem, siehe auch unsere Hinweise für Fragende!

<--steph--> · #3 (**permalink**) 13.10.2012, 16:05

Hallo, ja der opacity Code ist noch nicht drinnen. Den bekomme ich wenn das Hauptproblem gelöst ist schon hin. Ich möchte einen hover Effekt für ein Bild schaffen, das wenn ich drüber Fahr ein grauer "Schleier" wrscheint - eben eine 50% transparente Farbe. Schreib grad vom iPhone; falls noch unklar führe ich später am Abend genauer aus. Jedenfalls erscheint mit bisherigen Code leider kein hover Effekt

fricca · #4 (**permalink**) 13.10.2012, 16:12

Zitat:

Zitat von <--steph-->

Hallo, ja der opacity Code ist noch nicht drinnen. Den bekomme ich wenn das Hauptproblem gelöst ist schon hin. Ich möchte einen hover Effekt für ein Bild schaffen, das wenn ich drüber Fahr ein grauer "Schleier" wrscheint - eben eine 50% transparente Farbe.

Was du schreibst ergibt keinen Sinn.
Mach deine Transparenz, das ist dann bereits der abgeblendete Effekt. Da brauchst du nichts mehr drüber legen.

Zitat:

Schreib grad vom iPhone; falls noch unklar führe ich später am Abend genauer aus.

Solange du keinen Link auf dein Problem postest, wird es immer unklar sein. Lies und beachte, was ich in meiner vorigen Antwort geschrieben und verlinkt habe!

Zitat:

Jedenfalls erscheint mit bisherigen Code leider kein hover Effekt

Nein, natürlich nicht. Mit ungültigem Code kann kein Browser etwas anfangen.

<--steph--> · #5 (**permalink**) 13.10.2012, 19:15

OK fricca, stimme zu, wenn sich die Leute im Forum Zeit nehmen meine Fragen zu beantworten ist es nur fair ausführlich das Problem zu beschreiben.

Zur Orientierung, diesen Effekt wie auf dieser HP möchte ich erzielen: Home | NO NEW ENEMIES NETWORK

Wenn man über das Bild fährt (hover), erscheint eine art transparenter "Grauschleier".

Ich meine, dass kann man so lösen, das man ein Bild positioniert und als hover Befehl angibt, dass ein eine transparente graue fläche über den Bild erscheint.

Hoffe es ist nun klar was ich meine.

So nun zu meinen Codes:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0  Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitonal.dtd>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta hhtp-equiv="content-type" content="text/html;charset=utf-8" />
<title>Steven's page</title>
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen">
<link rel="icon" href="mein_favicon.ico" type"image/ico">
</head>

<body id="main">
<div id="wrapper">
<div class="header">
<h1><img src="costarica.png"></h1>
</div><!--header-->

<div class="bildmenue">

 <ul class="Orte">
         <li>
                 <a class="koala" href="steak.html"><img src="Koala.jpg" alt="image" /></a>
                 <div class="box">
                 <h3>La Fortuna</h3>
                 <p>La Fortuna ist ein schöner Waldabschnitt</p>
                 </div>
         </li>

         <li>
                 <a class="koala" href="steak.html"><img src="Koala.jpg" alt="image" /></a>
                 <div class="box">
                 <h3>La Fortuna</h3>
                 <p>La Fortuna ist ein schöner Waldabschnitt</p>
                 </div>
         </li>

         <li>
                 <a class="koala" href="steak.html"><img src="Koala.jpg" alt="image" /></a>
                 <div class="box">
                 <h3>La Fortuna</h3>
                 <p>La Fortuna ist ein schöner Waldabschnitt</p>
                 </div>
        </li>

         <li>
                 <a class="koala" href="steak.html"><img src="Koala.jpg" alt="image" /></a>
                 <div class="box">
                 <h3>La Fortuna</h3>
                 <p>La Fortuna ist ein schöner Waldabschnitt</p>
                 </div>
         </li>

 </ul>
</div><!--bildmenue-->

Code:

* {
margin: 0;
padding: 0;
}

body#main {
background-image: url(gestreift.png);
font-family: "Verdana";
font-size: 100%;
font-size: 70%;
line-height: 1.5;
}

body#steak{
background-color: #AFAFAF;
}

div.inhalt {
margin: 15em 35em;
width: 40em;
text-align: center;
text-style: none;
}

div.inhalt a {
font: "Arial Rounded MT Bold";
font-size: 4em;
color: #FFFFFF;
font-style: none;
}

h2 {
line-height: 100%;
}

div#wrapper {
margin: 5em 5em;
min-width: 90em;
border: 2px solid #484848;
padding: 1em 2em;
}

div.header h1 {
padding: 0.5em 0.5em;
background-image: ur(schräg_II.jpg);
margin: 0 0 1em;
}/* Rahmen um Menü Variations*/

div.bildmenue {
border: 6px solid #f0f0f0;
positon: relative; /*positioniert aber bleibt im Fluss wichtig für position:absolute der Kinderelemente*/
}

        ul.Orte {
        list-style: none;
        text-align: justify; /* Ausrichtung Blocksatz*/
        margin: 0 0 1em 0;
        }

        .bildmenue ul:after /*Nachzulesen: http://xhtmlforum.de/49974-bilder-sollen-horizontal-die-ganze-fl.html*/
        {
        content:'';
        display: inline-block;/* ja, da einem inline Element keien breite gegeben werden kann*/
        width: 100%;
        }

        .bildmenue ul li {
        display: inline-block;/* ?*/
        width: 22em;
        border: 4px solid #000;
        }

        div.bildmenue a img {
                padding: 0px;
                width: 22em;
                height: 13em;
                vertical-align: bottom;
        }

        div.bildmenue a img:hover {
        background-color: #fff;
        }

        div.bildmenue div {
        background-color: #403E41;
        padding: 5px;
        font-family: "Arial Black", Gadget, sans-serif;;
        }

Ist zwar nicht der ganze aber alles drin worauf es für die Lösung meines Anliegens ankommt. Anbei noch ein Beispiel-Bild wie sich das ganze derzeit darstellt. (Nicht über die Koalas wundern die sind nur Platzhalter

)

Mein Problem: dieser CSS code div.bildmenue a img:hover {
background-color: #fff;
}

löst mein Problem nicht (bewusst noch ohne opacity). Ich würde mir erwarten, das eine weiße fläche anstelle des Bilds erscheint.

So, ich hoffe das ist nun ausführlich genug. Hat jemand Vorschläge?

BG

threadi · #6 (**permalink**) 13.10.2012, 19:28

Auf deiner Beispielseite wurden die Bilder als Hintergrundbilder eingefügt und darauf wird ein Element gelegt, welches die Abdunklung erreicht. Wie gesagt: kein img-Element.

Wenn Du das erreichen willst, kannst Du es entweder genau so machen oder so wie oben schon gesagt wurde: mit

Code:

img:hover { opacity: 0; }

vorausgesetzt das Element, in dem das Bild liegt, hat auch einen weißen Hintergrund, sollte sich genau das ergeben was Du wünschst.

Wenn es dir noch um das langsame Aus- und Einblenden geht, dann müsstest Du (wie auf deiner Beispielseite) JavaScript verwenden.

fricca · #7 (**permalink**) 13.10.2012, 19:35

Zitat:

Zitat von <--steph-->

OK fricca, stimme zu, wenn sich die Leute im Forum Zeit nehmen meine Fragen zu beantworten ist es nur fair ausführlich das Problem zu beschreiben.

Warum ignorierst du so beharrlich die Aufforderung, einen Link zu deinem Problem zu posten? Nein, nicht zu irgendeiner anderen Seite -- deine Problemseite meine ich.

Ich habe keine Zeit für Code-Bausätze.

<--steph--> · #8 (**permalink**) 13.10.2012, 19:39

danke threadi, werde mal basteln und berichten!

Fricca, keine Ignoranz, ganz ehrlich (bitte nicht aus dem forum verbannen

) weiß ich nicht wie das geht!

BG

<--steph--> · #9 (**permalink**) 13.10.2012, 19:41

Zitat:

Zitat von threadi

Wenn es dir noch um das langsame Aus- und Einblenden geht, dann müsstest Du (wie auf deiner Beispielseite) JavaScript verwenden.

JAVA ist derzeit noch kein Thema; es handelt sich um meine erste Website. Vielleicht das nächste mal

fricca · #10 (**permalink**) 13.10.2012, 19:42

Wie willst du deine Website dann jemals online bringen?
Freehoster suchen, Testcase hochladen, Link hier posten.

Ich empfehle dir Grundlagenlektüre. Dir scheint einiges an Grundverständnis noch zu fehlen.

edit: Java und JavaScript sind völlig verschiedene Dinge.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Hilfe css Menu center	xXcyberXx	CSS	5	28.11.2010 19:51
CSS Navigation - Problem mit IE6	pcklinik	CSS	4	18.09.2007 12:04
Darstellungsproblem CSS Navigation im IE7	pcklinik	CSS	7	09.09.2007 17:25
CSS Einsteiger bittet um Hilfe	pcklinik	CSS	0	06.09.2007 14:40