|
|||
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 ; } |
Sponsored Links |
|
|||
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:
Gruss MrMurphy Geändert von MrMurphy (30.04.2015 um 07:42 Uhr) |
Sponsored Links |
|
|||
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> 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:
Ich hoffe das hilft die Codeschnipsel, helfen mehr weiter, bei der Lösung des Problems. |
|
|||
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; } |
|
|||
Hallo
Zitat:
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:
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> MrMurphy Geändert von MrMurphy (01.05.2015 um 13:16 Uhr) |
Stichwörter |
css 3, hover, text, überblenden |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |