Zur Navigation

Wie lautet der code zu diesem hover-effekt?

1 Günter Leipfinger

Hallo, ich bin auf diese Website gestoßen, deren code ich hier poste

[Edit Jörg: Code durch Link auf betreffende Seite ersetzt]

http://atelier-wunderlich.de/galerie/

Mir gefällt besonders der hovereffekt, bei dem die Bildaten eingeblendet werden. Wie hat der Ersteller dieser Seite das gemacht, ist das ein spezielles javascript?

16.04.2018 15:05 | geändert von Jörg: 16.04.2018 18:30

2 Jörg Kruse

Ich habe den Code mal durch einen Link auf die Seite ersetzt (was urheberrrechtlich gesehen sicherer ist)

Der Hover-Effekt ist mit CSS umgesetzt.

Zum HTML-Aufbau:

Innerhalb eines <figure> Elements sind das <img> und ein <figcaption> Element mit Bildtext untergebracht:

<figure class="gallery-item">
	<img src="bild.jpg" alt="...">
	<figcaption class="gallery-caption">
		Bildtext
	</figcaption>
</figure>

Zum dazu gehörigen CSS:

Das figure mit der Klasse gallery-item ist relativ positioniert: 

.gallery-item {
	position: relative;
}

Das figcaption mit der Klasse .gallery-caption ist absolut positioniert und am unteren Rand ausgerichtet:

.gallery-caption {
	display: block;
	position: absolute;
	width: 100%;
	bottom: 0;
	padding: .62em 1em;
	opacity: 0;
	-webkit-transition: all .3s;
		transition: all .3s;
}

Das "opacity: 0" bedeutet, dass das figcaption im Normallfall durchsichtig ist.

.gallery-item:hover .gallery-caption {
    opacity: 1;
}

Solange die Maus über das figure Element hovert, ist das darin enthaltene figcaption nicht mehr durchsichtig, also sichtbar

16.04.2018 20:51 | geändert: 16.04.2018 20:53

1 Forenmitglied fand diesen Beitrag gut

3 Günter Leipfinger

Wie kann ich diesen Effekt auf dieser Website erzeugen?
    <!doctype html>
    
	<html lang="de">
    <head>
    <meta charset="utf-8">
    <title>Bilderliste</title>
    	
    <style text>
		 body {
    	background-color: #dddddd;
    }
    
		h2 
		{
			color:black;
			font-family:arial, "lucida console", sans-serif; 
			text-align: center;
			}
		h3
			{
              color:red; 			       
		text-align: center;
         color:red;
		 font-family:arial, "lucida console", sans-serif; 
		 text-align: center;}
		p
		    {
		    text-align: center;
				}
				
		
			hr {
  background: #000;
 border: none;
 color: #000;
 height: 1px;
 width: 30%;
  
}
div {
width: 100%;
text-align: center;
}
  figure {
 width: 100%;
 text-align: center;
}     
		
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
		a:hover img { border:1px solid red; }

</style>
      
    </style>
    </head>
		<body>
			<script type="text/javascript" src="wz_tooltip.js"></script>
     
    <h2>Acryl- und Öltechnik</h2>
	<div>
	<cite title="zur größeren Ansicht">	 
	<a href="Malerei/Acrylmalerei/album/slides/willst_du_mit_mir_spielen.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/willst_du_mit_mir_spielen.jpg" width="160" height="200" alt=""/></a>
		</cite>
    <h3>Willst Du mit mir spielen?</h3>
    <p>Acryl auf leinwandbezogenen Karton<br>25 x 30cm
	</div>
			<hr>
	<div>
	<cite title="zur größeren Ansicht">	 
	<a href="Malerei/Acrylmalerei/album/slides/eis.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/eis.jpg" width="200" height="166" alt=""/></a>
		</cite>
    <h3>Eis</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>
    
		<hr>
		
    
		<div>
	<cite title="zur größeren Ansicht">		
	<a href="Malerei/Acrylmalerei/album/slides/brandung.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/brandung.jpg" width="200" height="163" alt=""/></a>
		</cite>	
		</div>
    <h3>Brandung</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>
		
		<hr>
    
		<div>
	<cite title="zur größeren Ansicht">		
	<a href="Malerei/Acrylmalerei/album/slides/gischt.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/s_gischt.jpg" width="200" height="163" alt=""/></a>
		</cite>	
		</div>
    <h3>Gischt</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>
		
		<hr>
    
    <div>
	<cite title="zur größeren Ansicht">	
	<a href="Malerei/Acrylmalerei/album/slides/durch_den_wald.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/durch_den_wald.jpg" width="200" height="152" alt=""></a>
		</cite>
	<h3>Durch den Wald</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
    </div>
		<hr>
		
    <div>
	<cite title="zur größeren Ansicht">	 
	<a href="Malerei/Acrylmalerei/album/slides/am_rande_der wueste.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/am_rande_der_wueste.jpg" width="200" height="168" alt=""/></a>
		</cite>
    <h3>Am Rande der Wüste</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>
	    <hr>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/haus_auf_dem lande.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/haus_auf_dem_lande.jpg" width="200" height="165" alt=""></a>
		</cite>
    <h3>Haus auf dem Lande</h3>
    <p align=center>Acryl auf Leinwand<br>60 x 50cm
	</div>
	    <hr>
	 <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/grossmutters_garten.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/grossmutters_garten.jpg" width="200" height="165" alt=""></a>
	   </cite>
    <h3>Großmutter's Garten</h3>
    <p align=center>Acryl auf Leinwand<br>60 x 50cm
	</div>
	    <hr>
    <div>
		 
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/rote_daecher.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/rote_daecher.jpg" width="200" height="165" alt=""></a>
      </cite>
	
    <h3>Rote Dächer</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
    </div>
       <hr>    
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/maerchenwald.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/maerchenwald.jpg" width="200" height="164" alt=""/></a>
		</cite>
    <h3>Märchenwald</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>	
	    <hr>
    <div>
		<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/die_gruene_flasche.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/gruene_flasche.jpg" width="200" height="166" alt=""/></a>
			</cite>
    <h3>Die grüne Flasche</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>
		<hr>
    <div>
		<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/der_rote_krug.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/der_rote_krug.jpg" width="169" height="200" alt=""/></a>
		</cite>
    <h3>Der rote Krug</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>
		<hr>
	<div>
		<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/blau_gegen_rot.jpg">
	<img src="Malerei/Acrylmalerei/album/thumbs_web/blau_gegen_rot.jpg" width="200" height="165" alt=""/></a>
		</cite>
    <h3>Blau gegen Rot</h3>
    <p>Acryl auf Karton<br>60 x 50cm
	</div>
		<hr>
	<div>
		<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/vase_mit_kelch.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/vase_mit_kelch.jpg" width="165" height="200" alt=""/></a>
		</cite>
	
    <h3>Vase mit Kelch</h3>
    <p>Acryl auf Leinwand<br>50 x 60cm
	</div>
		<hr>
    <div>
		<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/my_albums.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/heisser_sommer.jpg" width="200" height="163" alt=""/></a>
		</cite>
    <h3>Heißer Sommer</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>
		<hr>
	 <div>
		<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/gewitterstimmung.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/gewitterstimmung.jpg" width="200" height="172" alt=""/></a>
		</cite>
    <h3>Gewitterstimmung</h3>
	
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>
		<hr>
    <div>
		<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/aepfel.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/aepfel.jpg" width="200" height="165" alt=""/></a>
		</cite>
    <h3>Äpfel</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>	
		<hr>
	 <div>
		<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/am_samerberg.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/am_samerberg.jpg" width="200" height="165" alt=""/></a>
		</cite>
    <h3>Am Samerberg</h3>
    <p>Öl auf Leinwand<br>60 x 50cm
	</div>	
		<hr>
<div>
		<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/fruehlingsstimmung.jpg" width="800" height="629"><img src="Malerei/Acrylmalerei/album/thumbs_web/fruehlingsstimmung.jpg" alt=""/></a>
		</cite>
  <h3>Frühlingsstimmung</h3>
    <p>Öl auf Leinwand<br>40 x 30cm
	</div>	
     <hr>

	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/haus_am_berg.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/haus_am_berg.jpg" width="200" height="165" alt=""/></a>
		</cite>
	 <h3>Das Haus am Berg</h3>
	<p>Acryl auf Papier<br>60 x 50cm
	</div>	
		
		<hr>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/nachmittags_im_wald.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/nachmittags_im_wald.jpg" width="200" height="163" alt=""/></a>
		</cite>
    <h3>Nachmittags im Wald</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>
		<hr>
	 <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/herbstfarben.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/herbstfarben.jpg" width="162" height="200" alt=""/></a>
		</cite>
    <h3>Herbstfarben</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/schneeschmelze.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/schneeschmelze.jpg" width="200" height="160" alt=""/></a>
		</cite>
    <h3>Schneeschmelze</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>
		<hr>
	 <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/der_zweig.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/der_zweig.jpg" width="200" height="163" alt=""/></a>
	   </cite>
    <h3>Der Zweig</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>
		<hr>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/melancholie.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/melancholie.jpg" width="185" height="200" alt=""/></a>
		</cite>
    <h3>Melancholie</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>	
		<hr>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/die_unnahbare.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/die_unnahbare.jpg" width="171" height="200" alt=""/></a>
		</cite>
    <h3>Die Unnahbare</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>	
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/die_stolze.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/die_stolze.jpg" width="148" height="200" alt=""/></a>
	  </cite>
    <h3>Die Stolze</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>	
		<hr>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/landschaft_bei_sachsenkam.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/landschaft_bei_sachsenkam.jpg"   width="200" height="152" alt=""/></a>
		</cite>
    <h3>Landschaft bei Sachsenkam</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>
		<hr>
     <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/am_altwasser.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/s_am_altwasser.jpg"   width="200" height="152" alt=""/></a>
		</cite>
    <h3>Am Altwasser</h3>
    <p>Acryl auf Karton<br>60 x 50cm
	</div>
		<hr>
<div>		
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/kahle_baeume.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/kahle_baeume.jpg" width="116" height="200" alt=""/></a>
		</cite>
    <h3>Kahle Bäume </h3>   
	<p>Acryl auf Leinwand<br>100 x 50cm
	</div>
		<hr>	
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/im_karst.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/im_karst.jpg" width="200" height="139" alt=""/></a>
		</cite>
    <h3>Im Karst </h3>   
	<p>Acryl auf Karton<br>70 x 50cm
	</div>
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/komposition.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/komposition.jpg" width="200" height="139" alt=""/></a>
		</cite>
    <h3>Komposition</h3>   
	<p>Acryl auf Leinwand<br>70 x 50cm
	</div>
		<hr>	
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/abstrakte_architektur.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/abstrakte_architektur.jpg" width="200" height="139" alt=""/></a>
	  </cite>
    <h3>Abstrakte Architektur</h3>   
	<p>Acryl auf Leinwand<br>70 x 50cm
	</div>
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/boegen.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/boegen.jpg" width="200" height="139" alt=""/></a>
	  </cite>
    <h3>Bögen</h3>   
	<p>Acryl auf Leinwand<br>70 x 50cm
	</div>
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/glasbruch.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/glasbruch.jpg" width="145" height="200" alt=""/></a>
		</cite>
    <h3>Glasbruch</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>
			
	
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/stillleben_mit_bunten_fruechten.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/stilleben_mit_bunten_fruechten.jpg" width="200" height="169" alt=""/></a>
		</cite>
    <h3>Stillleben mit bunten Früchten</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>
		<hr>
<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/fische.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/fische.jpg" width="200" height="169" alt=""/></a>
		</cite>
    <h3>Nichts als Fische</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/magnolienzweig.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/magnolienzweig.jpg" width="161" height="200" alt=""/></a>
	</cite>
    <h3>Magnolienzweig</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/flowers.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/flowers.jpg" width="200" height="167" alt=""/></a>
	  </cite>
    <h3>flowers</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
    </div>
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/tristezza.jpg">
	<img src="Malerei/Acrylmalerei/album/thumbs_web/tristesse.jpg" width="200" height="165" alt=""/></a>
	</cite>
    <h3>Tristezza</h3>
    <p>Acryl auf Karton<br>60 x 50cm
	</div>
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/rote_tulpen.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/rote_tulpen.jpg" width="162" height="200" alt=""/></a>
		</cite>
    <h3>Rote Tulpen</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/krug_mit_fruechten.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/krug_mit_fruechten.jpg" width="160" height="200" alt=""/></a>
		</cite>
    <h3>Krug mit Früchten</h3>
    <p>Öl auf Karton<br>40 x 50cm
	</div>
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/obstschale.jpg">
		<img src="Malerei/Acrylmalerei/album/thumbs_web/obstschale.jpg" width="200" height="161" alt=""/></a>
		</cite>
    <h3>Obstschale</h3>
    <p>Öl auf Leinwand<br>30 x 25cm
	</div>
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/winter.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/winter.jpg" width="200" height="163" alt=""/></a>
		</cite>
    <h3>Winter</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
    </div>
		<hr>
		
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/eiswald.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/eiswald.jpg" width="164" height="200" alt=""/></a>
		</cite>
    <h3>Eiswald</h3>
    <p>Acryl auf Papier<br>50 x 60cm
    </div>
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/durch_das_land.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/durch_das_land.jpg" width="200" height="150" alt=""/></a>
		</cite>
    <h3>Durch das Land</h3>
    <p>Acryl auf Papier<br>70 x 50cm
	</div>	 
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/schraeger_weg.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/schraeger_weg.jpg" width="200" height="165" alt=""/></a>
		</cite>
    <h3>Schräger Weg</h3>
    <p>Acryl auf Papier<br>60 x 50cm
	</div>
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/furchen.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/furchen.jpg" width="200" height="165" alt=""/></a>
	  </cite>
    <h3>Furchen</h3>
    <p>Acryl auf Papier<br>60 x 50cm
	</div>
		<hr>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/herbstliche_farbstimmung.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/herbstliche_farbharmonie.jpg" width="200" height="162" alt=""/></a>
	  </cite>
    <h3>herbstliche Farbharmonie</h3>
    <p>Acryl auf Papier<br>60 x 50cm
	</div>
		<hr> 
    
   
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/baechlein.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/baechlein.jpg" width="200" height="165" alt=""/></a>
	  </cite>
    <h3>Das Bächlein</h3>
    <p>Öl auf Leinwand<br>50 x 40cm
	</div>
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/berge.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/berge.jpg" width="200" height="168" alt=""/></a>
		</cite>
    <h3>Berge</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>	 
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/blaue_berge.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/blaue_berge.jpg" width="200" height="136" alt=""/></a>
	  </cite>
    <h3>Blaue Berge</h3>
    <p>Acryl auf Leinwand<br>70 x 50cm
	</div>	 
		<hr>
<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/rocky_mountains.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/rocky_mountains.jpg" width="200" height="136" alt=""/></a>
	  </cite>
  <h3>Rocky Mountains</h3>
	 
    <p>Öl auf grundierte Hartpappe<br>50 x 40cm
	</div>	 
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/segelboot_im_mondschein.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/segelboot_im_mondschein.jpg" width="200" height="168" alt=""/></a>
		</cite>
    <h3>Segelboot im Mondschein</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>	
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/sonnenuntergang.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/sonnenuntergang.jpg" width="200" height="145" alt=""/></a>
		</cite>
    <h3>Sonnenuntergang</h3>
    <p>Acryl auf Karton<br>70 x 50cm
	</div>	
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/vollmond.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/vollmond.jpg" width="200" height="163" alt=""/></a>
		</cite>
    <h3>Vollmond</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>	
		<hr>
	
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/kirche_mit_zypresse.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/kirche_mit_zypresse.jpg" width="134" height="200" alt=""/></a>
		</cite>
    <h3>Kirche mit Zypresse</h3>
    <p>Acryl auf Leinwand<br>50 x 70cm
	</div>
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/paysage_de_neige.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/paysage_de_neige.jpg" width="200" height="168" alt=""/></a>
		</cite>
    <h3>Paysage de neige</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>	
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/landschaft_nach_vlaminck.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/landschaft_nach_vlaminck.jpg" width="200" height="164" alt=""/></a>
		</cite>
    <h3>Landschaft nach Vlaminck</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>	
        <hr>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/praerie.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/praerie.jpg" width="200" height="164" alt=""/></a>
	  </cite>
    <h3>Prärie</h3>
    <p>Öl auf grundierte Hartpappe<br>50 x 40cm
	</div>	
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/park_detail.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/park_detail.jpg" width="200" height="170" alt=""/></a>
		</cite>
    <h3>Park Detail</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>
		<hr>
<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/eins_zu_drei.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/s_eins_zu_drei.jpg" width="200" height="170" alt=""/></a>
		</cite>
    <h3>Eins zu Drei</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>
<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/monet_felder_im_fruehling.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/felder_im_fruehling.jpg" width="200" height="141" alt=""/></a>
		</cite>
    <h3>Monet Felder im Fruehling</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	</div>	
		<hr>
	
	<div>
	
<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/b_ostende.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/ostende.jpg" width="200" height="167" alt=""/></a>
  </cite>
  <h3>Ostende</h3>
  <p>Acryl auf Leinwand<br>60 x 50cm
	</div>	
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/illusion.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/illusion.jpg" width="200" height="159" alt=""/></a>
		</cite>
    </div>
		<h3>Illusion</h3>
    <p>Acryl auf Leinwand<br>50 x 40cm
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/gasse_in_kallmuenz.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/gasse.jpg" width="159" height="200" alt=""/></a>
		</cite>
    </div>
	<h3>Gasse in Kallmünz</h3>
    <p>Acryl auf Leinwand<br>50 x 60cm	
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/bei_san_geminiano.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/bei_san_geminiano.jpg" width="159" height="200" alt=""/></a>
		</cite>
	
    </div>
	<h3>Bei San Gimignano</h3>
    <p>Öl auf Leinwand<br>30 x 40cm	
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/heumandl.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/heumandl.jpg" width="166" height="200" alt=""/></a>
		</cite>
    </div>
	<h3>Heumandl</h3>
    <p>Acryl auf Leinwand<br>50 x 60cm
    <hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/die_bruecke.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/bruecke.jpg" width="166" height="200" alt=""/></a>
		</cite>
    </div>
	<h3>Die Brücke</h3>
    <p>Acryl auf Leinwand<br>50 x 60cm
    <hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/das_tor.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/das_tor.jpg" width="200" height="162" alt=""/></a>
	  </cite>
    </div>
	<h3>Das Tor</h3>
    <p>Acryl auf Karton<br>50 x 60cm
    <hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/veilchenstrauss.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/veilchenstrauss.jpg" width="167" height="200" alt=""/></a>
		</cite>
    </div>
	<h3>Veilchenstrauß</h3>
    <p>Acryl auf Karton<br>50 x 60cm
    <hr>
	
		
	<div>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/die_blaue_blume.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/die_blaue_blume.jpg" width="167" height="200" alt=""/></a>
		</cite>
	<h3>Die blaue Blume</h3>
    <p>Acryl auf Karton<br>50 x 60cm
    </div>
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/in_blau.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/in_blau.jpg" width="167" height="200" alt=""/></a>
		</cite>
	<h3>In Blau</h3>
    <p>Acryl auf Karton<br>50 x 60cm
    </div>
		<hr>	
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/am_starnberger_see.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/am_starnberger_see.jpg" width="200" height="168" alt=""/></a>
		</cite>
		  <h3>Am Starnberger See</h3>
    <p>Acryl auf grundiertes Papier<br>60 x 50cm
	    </div>
		<hr>
		<div>
		<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/milcheimer.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/milcheimer.jpg" width="166" height="200" alt=""/></a>
		</cite>
		  <h3>Milcheimer</h3>
    <p>Acryl auf grundiertes Papier<br>50 x 60cm
	    </div>
	
	<hr>
   	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/krug_mit_brot_und_fruechten.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/krug_mit_brot_und_fruechten.jpg" width="166" height="200" alt=""/></a>
		</cite>
		  <h3>Krug mit Brot und Früchten</h3>
    <p>Acryl auf grundiertes Papier<br>60 x 50cm
	    </div>
      <hr>
    	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/gemuese.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/gemuese.jpg" width="200" height="155" alt=""/></a>
		</cite>
		  <h3>Gemüse und ein Apfel</h3>
    <p>Acryl auf grundiertes Papier<br>60 x 50cm
	    </div>
	
	<hr>
		<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/halloween.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/s_halloween.jpg" width="200" height="155" alt=""/></a>
		</cite>
		  <h3>Halloween</h3>
    <p>Acryl auf Leinwand<br>60 x 50cm
	    </div>
	
	<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/rote_lagune.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/rote_lagune.jpg" width="200" height="161" alt=""/></a>
		</cite>
		  <h3>Rote Lagune</h3>
    <p>Acryl auf grundiertes Papier<br>60 x 50cm
	    </div>
    <hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/unter_blühenden_kirschbäumen.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/unter_blühenden_kirschbäumen.jpg" width="200" height="164" alt=""/></a>
		</cite>
		  <h3>Unter blühenden Kirschbäumen</h3>
    <p>Acryl auf grundiertes Papier<br>60 x 50cm
	    </div>
			<hr>
  
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/kirschbluete.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/kirschbluete.jpg" width="200" height="175" alt=""/></a>
		</cite>
		  <h3>Kirschblüte</h3>
    <p>Acryl auf grundiertes Papier<br>60 x 50cm
	    </div>
			<hr>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/lukaskirche.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/lukaskirche.jpg" width="200" height="166" alt=""/></a>
		</cite>
		  <h3>St. Lukas</h3>
    <p>Acryl auf grundiertes Papier<br>60 x 50cm
	    </div>
			<hr>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/baechlein.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/baechlein.jpg" width="200" height="164" alt=""/></a>
		</cite>
		  <h3>Bächlein</h3>
    <p>Öl auf Leinwand<br>50 x 40cm
		</div>
		<hr>
	 <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/im_enggrund.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/im_enggrund.jpg" width="200" height="148" alt=""/></a>
		</cite>
		  <h3>Im Enggrund</h3>
    <p>Öl auf Leinwand<br>40 x 30cm
		<hr>	
	    </div>
	 <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/im_englischen_garten.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/im_englischen_garten.jpg" width="143" height="200" alt=""/></a>
		</cite>
		  <h3>Im Englischen Garten</h3>
    <p>Acryl auf Karton<br>50 x 30cm
		<hr>	
	    </div>
		<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/kahnfahrt.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/kahnfahrt.jpg" width="200" height="168" alt=""/></a>
		</cite>
		  <h3>Kahnfahrt</h3>
    <p>Acryl auf Karton<br>60 x 50cm
		<hr>	
	    </div>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Acrylmalerei/album/slides/altwasser.jpg"><img src="Malerei/Acrylmalerei/album/thumbs_web/altwasser.jpg" width="200" height="168" alt=""/></a>
		</cite>
		  <h3>Altwasser</h3>
    <p>Acryl auf Karton<br>60 x 50cm
		<hr>	
		</div>	
			
		<h2><span style="color:blue;font-weight:bold">Aquarelle und Grafik</span></h2>
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/stillleben_mit_fruechten.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/aqua1.jpg" width="200" height="158" alt=""/></a>
		</cite>
    </div>
	<h3>Stillleben mit Früchten</h3>
    <p>Aquarellpapier<br>40 x 30cm	
		<hr>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/im_herbstkleid.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/im_herbstkleid.jpg" width="159" height="200" alt=""/></a>
		</cite>
    </div>
	<h3>Im Herbstkleid</h3>
    <p>Aquarellpapier<br>40 x 30cm	
		<hr>	
	<div>
	<cite title="zur größeren Ansicht">	
	<a href="Malerei/Aquarelle/album/slides/aqua2.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/aqua2.jpg" width="158" height="200" alt=""/></a>
		</cite>
    <h3>Gefäße</h3>
    <p>Aquarellpapier<br>40 x 30cm	
	</div>
		<hr>
	<h3>Flasche mit Früchten</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/flasche_mit_fruechten.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/aqua3.jpg" width="158" height="200" alt=""/></a>
		</cite>
    <p>Aquarellpapier<br>30 x 40cm	
	</div>
		<hr>
    <h3>Sonnenblumen</h3>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/aqua4.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/aqua4.jpg" width="152" height="200" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>50 x 60cm
	</div>
		<hr>
    <h3>Sonnenhut</h3>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/sonnenhut.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/sonnenhut.jpg" width="152" height="200" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>50 x 60cm
	</div>
		<hr>
	<h3>Baumstudie</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/aqua5.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/aqua5.jpg" width="200" height="164" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>40 x 30cm
	</div>
		<hr>
	<h3>Landschaft bei Wolfratshausen</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/aqua6.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/aqua6.jpg" width="160" height="200" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>	
    <h3>Inntal im Oberengadin</h3>	
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/aqua7.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/aqua7.jpg" width="200" height="160" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>	
	<h3>Auf dem Weg zum Ahornboden</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/aqua8.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/aqua8.jpg" width="200" height="159" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
	<h3>Bei Sachsenkam</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/bei_sachsenkam.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/aqua9.jpg" width="200" height="158" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>36 x 48cm
	</div>
		<hr>
	<h3>Eberesche</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/eberesche.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/aqua10.jpg" width="160" height="200" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
	<h3>Lilien</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/lilien.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/aqua11.jpg" width="158" height="200" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>36 x 48cm
	</div>
		<hr>
	<h3>Rhabarberstiel</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/rhabarberstiel.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/aqua12.jpg" width="200" height="158" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>	
	<h3>Am Egglburger See</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/am_egglburger_see.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/am_egglburger_see.jpg" width="200" height="160" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
	<h3>Bäume am Ahornboden</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/baeume_am_ahornboden.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/baeume_am_ahornboden.jpg" width="164" height="200" alt=""/></a>
		</cite>
	 <p>Aquarellpapier<br>30 x 40cm
	 </div>
		<hr>
	 <h3>Baumstudie</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/baumstudie.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/baumstudie.jpg" width="161" height="200" alt=""/></a>
		</cite>
	 <p>Aquarellpapier<br>30 x 40cm
	 </div>
		<hr>
	<h3>Baumstudie 2</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/baumstudie_2.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/baumstudie_2.jpg" width="200" height="161" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
	<h3>Berglandschaft</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/berglandschaft.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/berglandschaft.jpg" width="160" height="200" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
	<h3>Mach' ma Brotzeit</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/brotzeit.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/brotzeit.jpg" width="157" height="200" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	 </div>
		<hr>
	<h3>Brücke</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/bruecke.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/bruecke.jpg" width="200" height="158" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
	<h3>Bücherstudie</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/buecherstudie.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/buecherstudie.jpg" width="200" height="166" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
	<h3>Clematis</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/clematis.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/clematis.jpg" width="152" height="200" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
	<h3>Dorfkirche</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/dorfkirche.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/dorfkirche.jpg" width="200" height="162" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>	
	<h3>Gemüse</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/gemuese.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/gemuese.jpg" width="200" height="160" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>	
	<h3>Herbstlandschaft</h3	
    ><div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/herbstlandschaft.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/herbstlandschaft.jpg" width="200" height="157" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
	<h3>Kirche</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/kirche.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/kirche.jpg" width="200" height="166" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
	<h3>Kloster Reutberg</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/kloster_reutberg.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/kloster_reutberg.jpg" width="200" height="162" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>	
    <h3>Krug mit Büchern</h3>
    <div>
	<cite title="zur größeren Ansicht">
    <a href="Malerei/Aquarelle/album/slides/krug_mit_buechern.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/krug_mit_buechern.jpg" width="200" height="162" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
    <h3>Landschaft</h3>
    <div>
	<cite title="zur größeren Ansicht">
    <a href="Malerei/Aquarelle/album/slides/landschaft.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/landschaft.jpg" width="200" height="157" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
    <h3>Landschaft 2</h3>
    <div>
	<cite title="zur größeren Ansicht">
    <a href="Malerei/Aquarelle/album/slides/landschaft_2.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/landschaft_2.jpg" width="200" height="160" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
	<h3>Lilienzweig</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/lilienzweig.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/lilienzweig.jpg" width="150" height="200" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
	<h3>Mohn</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/mohn.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/mohn.jpg" width="154" height="200" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
	<h3>Portraitstudie</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/portraitstudie.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/portraitstudie.jpg" width="162" height="200" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>	
	<h3>Portraitstudie 2</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/portraitstudie_2.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/portraitstudie_2.jpg" width="166" height="200" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
	<h3>Rosen</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/rosen.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/rosen.jpg" width="200" height="156" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>	
	<h3>Roter Mohn</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/roter_mohn.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/roter_mohn.jpg" width="200" height="163" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>	
	<h3>See bei Sachsenkam</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/see_bei sachsenkam.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/see_bei_sachsenkam.jpg" width="200" height="160" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
	<h3>Seerosen</h3>
	<div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/seerosen.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/seerosen.jpg" width="200" height="158" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
	<h3>Sonnenblumen</h3>
    <div>
	<a href="Malerei/Aquarelle/album/slides/aqua4.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/aqua4.jpg" width="152" height="200" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
    <h3>Spargelzeit</h3>
    <div>
	<cite title="zur größeren Ansicht">
    <a href="Malerei/Aquarelle/album/slides/spargelzeit.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/spargelzeit.jpg" width="200" height="159" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
		</div>
		<hr>
<h3>So weit die Füße tragen</h3>
    <div>
	<cite title="zur größeren Ansicht">
    <a href="Malerei/Aquarelle/album/slides/stiefel.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/stiefel.jpg" width="200" height="164" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>	
	<h3>Stillleben</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/stillleben.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/stillleben.jpg" width="200" height="159" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
	<h3>Vase mit Büchern</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/vase_mit_buechern.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/vase_mit_buechern.jpg" width="166" height="200" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
	<h3>Weg in den Wald</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/weg_in_den_wald.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/weg_in_den_wald.jpg" width="165" height="200" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm<br>
    </div>
		<hr>
	<h3>Winterlandschaft</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/winterlandschaft.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/winterlandschaft.jpg" width="200" height="164" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
	<h3>Zwiebelstudie 1</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/zwiebelstudie_1.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/zwiebelstudie1.jpg" width="200" height="160" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
	<h3>Zwiebelstudie 2</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/zwiebelstudie_2.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/zwiebelstudie2.jpg" width="200" height="163" alt=""/></a>
		</cite>
		 <div>
	
	<p>Aquarellpapier<br>30 x 40cm<br>
    </div>
		<hr>	
	
    <div>
	<h3>Kirche im Engadin</h3
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/kirche_im_engadin.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/engadin.jpg" width="163" height="200" alt=""/></a>
		</cite>
		 <div>
	<p>Aquarellpapier<br>30 x 40cm
		
	</div>
		<hr>
 <h2><span style="color:black;font-weight:bold">Grafik</span></h2>
<hr>	
	<h3>Mädchen</h3>
    <div>
	<cite title="zur größeren Ansicht">
	<a href="Malerei/Aquarelle/album/slides/maedchen.jpg"><img src="Malerei/Aquarelle/album/aquathumbs/maedchen.jpg" width="163" height="200" alt=""/></a>
		</cite>
	<p>Aquarellpapier<br>30 x 40cm
	</div>
		<hr>
	<div>
     </body>
    </html>
anstelle des hier verwendeten tooltip?

27.04.2018 21:28 | geändert: 27.04.2018 21:29

4 Jörg Kruse

Wie der Tooltip derzeit auf der Seite aussieht, kann ich nicht sehen. Wenn ich den Quelltext im Browser aufrufe, fehlen mir ja die Bilder und auch die Datei wz_tooltip.js fehlt mir :) falls du die Seite irgendwo hochladen und verlinken könntest, könnte man sich ein Bild inklusive der Bilder machen.

Vielleicht reicht es, die Klassennamen zu übertragen, die der CSS-Code in Beitrag 2 verwendet, beipielsweise so:

<h2>Acryl- und Öltechnik</h2>
<div class="gallery-item">
    <a href="Malerei/Acrylmalerei/album/slides/willst_du_mit_mir_spielen.jpg" title="zur größeren Ansicht">
        <img src="Malerei/Acrylmalerei/album/thumbs_web/willst_du_mit_mir_spielen.jpg" width="160" height="200" alt=""/>
    </a>
    <div class="gallery-caption">
        <h3>Willst Du mit mir spielen?</h3>
        <p>Acryl auf leinwandbezogenen Karton<br>25 x 30cm</p>
    </div>
</div>

... wobei ich hier noch ein <div> eingebaut habe, welches h3-Überschrift und Textzeile umfasst

Oben im <style> Abschnitt müssen dann nur noch die CSS-Definitonen aus Beitrag 2 eingebaut werden.

28.04.2018 16:25 | geändert: 28.04.2018 16:28

1 Forenmitglied fand diesen Beitrag gut

6 Jörg Kruse

OK, das Script ist gar nicht eingebunden (Fehler 404)

Nur nochmal zur Klarstellung: dir geht es schon um Bildunterschriften mit der roten Überschrift und der Zeile darunter und nicht um das Tooltip "Zur größeren Ansicht"? dann kannst du die oben aufgeführte Lösung ja mal probieren. Allerdings sollte der Text dann ggf. etwas kleiner formatiert werden, damit er bei den schmalen Bildern nicht zu breit ist.

28.04.2018 17:19

1 Forenmitglied fand diesen Beitrag gut

7 Günter Leipfinger

Es geht mir darum, dass ich beim Überfahren mit der Maus, die Bildbeschreibung lesen kann, also Größe und Material

28.04.2018 19:56

8 Jörg Kruse

Ja, dann kannst du das im Prinzip, wie in meinem letzten Beitrag beschrieben, versuchen umzusetzen. Wenn die rote <h3> Überschrift nicht in dem Tooltip enthalten sein soll, muss sie natürlich noch nach außerhalb verschoben werden.

29.04.2018 13:16

9 Günter Leipfinger

Danke für Deinen Beitrag
Die rote Überschrift ist draußen, aber nun ist die Beschreibung (Bildgröße) quer über das Bild. Beim Original war es auf die Bildbreite begrenzt und außerdem weiß auf schwarzem Hintergrund.
Hier mein html-code:
<div class="gallery-item">
    <a href="Malerei/Acrylmalerei/album/slides/willst_du_mit_mir_spielen.jpg" title="zur größeren Ansicht">
        <img src="Malerei/Acrylmalerei/album/thumbs_web/willst_du_mit_mir_spielen.jpg" width="160" height="200" alt=""/>
    </a>
    <div class="gallery-caption">
       
        <p><a href="Malerei/Acrylmalerei/willst_du_mit_mir_spielen.jpg">Acryl auf leinwandbezogenen Karton<br>25 x 30cm</a></p>
    </div>
</div><hr>
	<div>
und im head-Bereich:
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
		a:hover img { border:2px solid red; }
		
		
.gallery-item {
	position: relative;
}
		.gallery-caption {
	display: block;
	position: absolute;
	width: 100%;
	bottom: 0;
	padding: .62em 1em;
	opacity: 0;
	-webkit-transition: all .3s;
		transition: all .3s;
}
		.gallery-item:hover .gallery-caption {
    opacity: 1;
}

29.04.2018 13:36

10 Jörg Kruse

Damit die Beschreibung nicht über das Bild hinaus geht, muss der Container so breit wie das Bild sein, beim ersten Bild beispielsweise 160px:

<div class="gallery-item" style="width: 160px">

Die Container sollten dann mit margin:auto zentriert werden, damit die Bilder weiterhin zentriert auf der Seite angezeigt werden 

.gallery-item {
    position: relative;
    margin: 0 auto;
}

Der Caption-Container sollte bei 100% Breite besser keinen Innenabstand haben, die padding Angabe sollte deswegen entfernt werden. Dazu kannst du noch mit background-color einen schwarze Hintergrundfarbe definieren:

.gallery-caption {
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0;
    opacity: 0;
    background-color: #000;
    font-size: 0.8em;
}

Die Schriftgröße habe ich hier auch etwas kleiner definiert, damit die Texte in das Bild passen :)

Die Textfarbe der Links innerhalb des Caption-Containers sollte dann noch als weiß definiert werden:

.gallery-caption a {
    text-decoration: none;
    color: #fff;
}

29.04.2018 23:14 | geändert: 29.04.2018 23:16

1 Forenmitglied fand diesen Beitrag gut