div einblenden bei mouseover über Bild

DjMG

DjMG

Erfahrenes Mitglied
Hallo!


Ich habe ein Bild, bei dessen Mouseover ein <div> erscheinen soll (anstelle bzw. "vor" dem Bild). Ein Beispiel wäre: http://themes.pixelwars.org/responsy-wp/portfolio/ (über ein Item fahren mit der Mouse)


Wie ich dem Beispiel entnommen habe, ist die Struktur wie folgt:
HTML: 
<div id="box"> 
 <img ... />
 <div id="maske">UNSICHTBARER TEXT</div>
</div>
Wie bekomme ich es hin, dass das Masken-Div bei mouseover vom Bild erscheint?


Beste Grüße
DjMG
 
Hi,

hier ein Vorschlag.
Bei jQuery gibt es noch zig andere Varianten.
Ich würde da mal schauen bei Bedarf.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>  
  <head>    
    <title>
    </title>    
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />    
    <meta http-equiv='Content-Language' content='de-DE' />    
    <meta name='keywords'    content='' />    
    <meta name='description' content='' />                             
<script src="http://code.jquery.com/jquery-latest.js"></script>      
  </head>  
  <body>     
    <style type="text/css">  #maske {  width: 150px; height: 150px; background: #333; color: #fff;   }   
    </style>       
<script type="text/javascript">
    $(document).ready(function() {
      $("#box img").mouseover(function(){
        $(this).toggle("slow");
        $("#maske").toggle("slow");      
      });
      $('#box #maske').mouseout(function(){
        $("#box img").toggle("slow");      
        $(this).toggle("slow");      
      });
    });
  </script>       
    <div id="box">      
      <div id="maske" style="display:none">UNSICHTBARER TEXT   
      </div>    
      <img src="http://www.tutorials.de/customavatars/avatar106722_1.gif" height="150" width="150" />
    </div>  
  </body>
</html>
 
Hallo,

ich hab eine ähnliche Galerie gesehen. Kann mir jemand sagen, welche das ist (ich nehme mal an/hoffe mal, das ist ein jQuery-Standardelement, wo ich den Code laden kann?!).

Der Clou dort ist ja, dass das Projekt aus der Thumbnail-Galerie dann oben eingeblendet wird. Zum mehr-erfahren, linkt man dann erst von dort aus auf eine separate Projektseite.
 
Cool, aber wie geht das mit Vorschau mit Text Bild etc. oben einblenden? Wie heißt diese Galerie?

Nun hat man oben meinen äußerst informativen Link rausgenommen. Ich versuche es zu beschreiben:

Ein Thumbnail-Galerie, angeordnet in Kacheln. Aber wenn ich auf eins der Bildchen draufklicke komme ich nicht auf ein großes Bild oder eine Projektseite (wenn die Galerie nun so ne Portfolio-Vorschau wär), sondern über der Thumbnailgalerie geht ein neuer Contentbereich auf (obendrüber IM Content, also kein Layer/Popup) darin weiterführende Infos zum gerade geklickten Thumbnail...Text, Bild etc. über einen Link "mehr Details" komme ich ERST DANN zu einer eigenen Projektseite.

Ist das eine bekannte Standardgalerie? Wenn ja, wie heißt sie?
 
@Fantasmo

Welche Galerie meinst du denn nun?
So, wie du das beschreibst, können das Millionen sein!
Gib doch einfach mal den Link an.
 
Das ist im Prinzip auch mit Thumbnail und Overlay-Ding für kurze Textinfo und das PLUS ist dann aber dass bei Klick Inhalte im Bereich ÜBER der Galerie eingeblendet werden.
Ich schicke dir mal den Link per PN (wurde hier gelöscht), es ist jedenfalls das Template "Aware" bei themeforest.

EDIT: So ich probiers nochmal...hier ist der Link zu dem Template mit der besagten Galerie http://themewich.com/aware/
 
Zuletzt bearbeitet von einem Moderator:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück