zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Hovereffekt - Text über einem Bild einblenden

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.04.2015, 05:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.04.2015
Beiträge: 3
chazz befindet sich auf einem aufstrebenden Ast
Standard CSS Hovereffekt - Text über einem Bild einblenden

Hallo zusammen,

also ich habe bei meinen Projekt, die Aufgabe einen Mouseover Effekt auf mehreren Bildchen in einer Tabelle einzubauen. Beim Hovern der Maus über dem Bild soll ein Text eingeblendet werden, mit einer gewissen Opacity.

Der Text soll direkt über den Bild erscheinen. Mein Problem ist, dass ich die Positionierung nicht gescheit hinbekomme und der Text innerhalb, der Tabelle immer unter dem Bild steht. (Das Bild ist übriegens ein Link zu weiterführenden Seiten)

Ich hab bereits auf verschiedenen Seiten versucht nach weiterzukommen von daher versuch ich es jetzt hier, als eine meiner letzten Anlaufstellen.

Bitte um Hilfe.

Code:
/* Da drin soll der Text stehen, also auf der Seite dann am Ende*/
span.contentBild {
  position: relative;
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
}
/* Das img hat folgende Klasse */
img.bigger{
width: 50% ;
height: 50% ;
margin: 20px ;
padding: 20px ;
}
Bitte um Hilfe...
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.04.2015, 07:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.005
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

deine Quellcodeschnipsel helfen bei der Lösung des Problems leider überhaupt nicht weiter. Teile uns bitte einen Link zu der Seite mit, nutze einen Freewareprovider wie pblaced.net.

Zudem mißbrauchst du Tabellen zum Layouten, dafür sind sie weder gedacht noch geeignet. Deshalb solltest du geeignetere Elemente benutzen, die dann natürlich in einer Tabellendarstellung angeordnet werden können. Der Quelltext wäre übersichtlicher und dein Problem ließe sich leichter lösen.

Zitat:
die Aufgabe einen Mouseover Effekt
Und was ist mit den Touchscreens von Smartphone, Tablet und Co? In der Praxis sind das ja inzwischen über 60% aller Geräte, mit denen im Internet gesurft wird.

Gruss

MrMurphy

Geändert von MrMurphy (30.04.2015 um 07:42 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.04.2015, 09:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.04.2015
Beiträge: 3
chazz befindet sich auf einem aufstrebenden Ast
Standard

Hm stimmt, was den Code angeht, der hilft wirklich nicht weiter. War ein bisschen doll müde. Darin soll es angezeigt werden: (Ich hab leider derzeit nur den Code für die Tabelle, was mich zur nächsten Frage führt, wie kann ich es ohne Tablle machen? - das ist aber erstmal nicht so wichtig, dass krieg selbst recherchiert)
HTML-Code:
<table style="auto" align="center">
<tr>
<td>
<a href="http://localhost/wordpress/gallery2/" class="galleryZwei">
<img src="http://localhost/wordpress/wp-content/uploads/2015/04/platzhalter.png" alt="" class="bigger"/>
</a>
<span class='contentBild'>
Text
</span>
</td>
</tr>
</table>
Hier der Ausschnitt aus der .css - Datei:
Code:
img.bigger{
width: 50% ;
height: 50% ;
margin: 20px ;
padding: 20px ;
}
span.contentBild {
  position: relative;
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
}
a.imageHJ{
	position: relative;
}
td > span{
	left: inherit; 
	top: inherit; 
	
}
td > img{
	left: inherit;
	top: inherit; 
}
/* Hier dann der Hover Effekt... 
1. Frage wie spreche, darin das Span an ? */
img.bigger:hover{
opacity: 0.85;
}
Zitat:
nd was ist mit den Touchscreens von Smartphone, Tablet und Co? In der Praxis sind das ja inzwischen über 60% aller Geräte, mit denen im Internet gesurft wird.
Gute Frage, würde dass denn auf den Geräten nicht funktionieren ?
Ich hoffe das hilft die Codeschnipsel, helfen mehr weiter, bei der Lösung des Problems.
Mit Zitat antworten
  #4 (permalink)  
Alt 01.05.2015, 06:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.04.2015
Beiträge: 3
chazz befindet sich auf einem aufstrebenden Ast
Standard Tabelle ausgebaut... nun funktioniert der Hover Effekt nicht...

Hallo zusammen,

also div.contentBild und div.image_link liegen an der gleichen Stelle. Beim Hover über image_Link, soll der Content eingeblendet werden.
Was mache ich hier wieder falsch ?
Code:
div.contentBild{
position: relative;
top: 0;
left: 0; 
display: none; 
}
div.image_link{
position: relative;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px; 
float: left; 
}
.image_link:hover div.content_Bild {
display: block;
opacity: 0.85; 
}
Mit Zitat antworten
  #5 (permalink)  
Alt 01.05.2015, 12:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.005
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Gute Frage, würde dass denn auf den Geräten nicht funktionieren ?
Hast du noch nie mit einem Touchscreen-Gerät gesurft? Wie soll ein Hover-Effekt denn damit funktionieren? Bei Touchscreens gibt es schlicht keinen Hover-Effekt.

Hover-Effekte sind für die meisten Besucher heutzutage meist hinderlich. Grade wenn ihnen dadurch Informationen entgehen. Wie sollen die denn an den Text kommen?

Zudem sollten möglichst alle Informationen ohne Hindernis (und nichts anderes ist für deinen Wunsch der Hover-Effekt) sichtbar sein. Deshalb sollte der Hover-Effekt nur noch als überflüssige Spielerei eingesetzt werden, nicht aber um Informationen ein- und auszublenden oder Funktionen überhaupt erst zu ermöglichen.

Was ist denn so schlimm daran, wenn die Besucher die Texte zu den Bildern direkt sehen können? Zumal die das wollen. Es gibt doch wenig nervenderes als viele Mini-Informationen nacheinander aufrufen zu müssen, die man problemlos direkt zur Kenntnis nehmen könnte.

Zitat:
Was mache ich hier wieder falsch ?
Keine Ahnung, mit deinen Quellcodeschnipseln kann niemand etwas anfangen. Wir brauchen die ganze Seite und zum Beispiel auch die Bilder, die schließlich die Grundlage sind. Es ist nervig einen Hilfesuchenden mehrmals darauf hinweisen zu müssen. Wahrscheinlich hat dir deshalb bislang auch niemand anders geantwortet.

Ich habe dir zum Rumspielen mit dem Hover-Effekt mal ein Beispiel mit aktuellem HTML und CSS erstellt:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Bilder mit Hover-Effekt</title>
   <meta name="description" content="HTML">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      body {
         padding: 0;
         background-color: blue;
      }
      img {
         border-radius: 0.5rem;
      }
      ol,
      ul {
         padding-left: 0;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-around;
      }
      li {
         font-size: 1.1rem;
         list-style-type: none;
         position: relative;
         margin: 0.5rem;
      }
      li p {
         padding: 1rem;
         color: white;
      }
      li div {
         width: 250px; 
         height: 250px; 
         position: absolute; 
         top: 0px; 
         left: 0px; 
         background-color: rgba(0,0,0,0.75); 
         border-radius:10px; 
         -webkit-transform: scale(0); 
         transform: scale(0); 
         -webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75); 
         box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);
         -webkit-transition: all 2s ease 1s; 
         transition: all 2s ease 1s;
      }
      li:hover div {
         -webkit-transform: scale(1); 
         transform: scale(1);
         -webkit-transition: all 0.7s ease; 
         transition: all 0.7s ease;
      }
   </style>
</head>
<body>
   <main>
      <ul>
         <li>
            <img src="http://upload.wikimedia.org/wikipedia/commons/3/38/Nyc_transit_authority_token.png" alt="New York City Subway token">
            <div>
               <p>MrMurphys Angebot des Jahres.</p>
            </div>
         </li>
         <li>
            <img src="http://upload.wikimedia.org/wikipedia/commons/3/38/Nyc_transit_authority_token.png" alt="New York City Subway token">
            <div>
               <p>MrMurphys Angebot des Jahres.</p>
            </div>
         </li>
         <li>
            <img src="http://upload.wikimedia.org/wikipedia/commons/3/38/Nyc_transit_authority_token.png" alt="New York City Subway token">
            <div>
               <p>MrMurphys Angebot des Jahres.</p>
            </div>
         </li>
         <li>
            <img src="http://upload.wikimedia.org/wikipedia/commons/3/38/Nyc_transit_authority_token.png" alt="New York City Subway token">
            <div>
               <p>MrMurphys Angebot des Jahres.</p>
            </div>
         </li>
         <li>
            <img src="http://upload.wikimedia.org/wikipedia/commons/3/38/Nyc_transit_authority_token.png" alt="New York City Subway token">
            <div>
               <p>MrMurphys Angebot des Jahres.</p>
            </div>
         </li>
         <li>
            <img src="http://upload.wikimedia.org/wikipedia/commons/3/38/Nyc_transit_authority_token.png" alt="New York City Subway token">
            <div>
               <p>MrMurphys Angebot des Jahres.</p>
            </div>
         </li>
         <li>
            <img src="http://upload.wikimedia.org/wikipedia/commons/3/38/Nyc_transit_authority_token.png" alt="New York City Subway token">
            <div>
               <p>MrMurphys Angebot des Jahres.</p>
            </div>
         </li>
         <li>
            <img src="http://upload.wikimedia.org/wikipedia/commons/3/38/Nyc_transit_authority_token.png" alt="New York City Subway token">
            <div>
               <p>MrMurphys Angebot des Jahres.</p>
            </div>
         </li>
         <li>
            <img src="http://upload.wikimedia.org/wikipedia/commons/3/38/Nyc_transit_authority_token.png" alt="New York City Subway token">
            <div>
               <p>MrMurphys Angebot des Jahres.</p>
            </div>
         </li>
         <li>
            <img src="http://upload.wikimedia.org/wikipedia/commons/3/38/Nyc_transit_authority_token.png" alt="New York City Subway token">
            <div>
               <p>MrMurphys Angebot des Jahres.</p>
            </div>
         </li>
         <li>
            <img src="http://upload.wikimedia.org/wikipedia/commons/3/38/Nyc_transit_authority_token.png" alt="New York City Subway token">
            <div>
               <p>MrMurphys Angebot des Jahres.</p>
            </div>
         </li>
         <li>
            <img src="http://upload.wikimedia.org/wikipedia/commons/3/38/Nyc_transit_authority_token.png" alt="New York City Subway token">
            <div>
               <p>MrMurphys Angebot des Jahres.</p>
            </div>
         </li>
      </ul>
   </main>
</body>
</html>
Gruss

MrMurphy

Geändert von MrMurphy (01.05.2015 um 13:16 Uhr)
Mit Zitat antworten
Antwort

Stichwörter
css 3, hover, text, überblenden

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wrapper wächst nicht mit, keine Floats maclady CSS 11 10.02.2010 18:30
Wachsende Container Andy CD CSS 13 10.02.2010 14:08
Zeilenabstand bei font-Angabe wieder weg nick CSS 7 16.02.2008 15:39
Internet Explorer verschluckt Grafik Webentwickler Eric CSS 4 06.07.2007 15:53
CCS Problem mit <div>s dope_dope CSS 8 03.10.2005 20:32


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:54 Uhr.