• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mouseover-Effekt Galerie

M

Mr.Blatt

Neues Mitglied
Halli Hallo,
ich bin ganz frisch im Forum, habe aber jetzt auf die schnelle keine Antwort auf mein spezifisches Problem gefunden.

Ich habe auf meiner Seite eine Galerie, welche mit kleinen Vorschaubildern gespickt ist. Fährt man nun über diese Vorschaubilder, blenden diese ab und ein Text erscheint über dem Bild. Klickt man auf ein Bild, wird dieses Groß, die Seite "verdunkelt sich" und man kann durch alle Bilder klicken.
Wie diese Mouseover Funktion funktioniert habe ich schon verstanden doch nun hätte ich gerne, dass ein Text auch beim Mouseover über das große Bild erscheint.
Sprich: Ich klick aufs Vorschaubild - sehe das große - fahre mit der Maus über das große Bild - nun erscheint ein Text und das Bild dunkelt sich ab wie beim Vorschaubild.

Hier mal ein Auszug:
HTML:
<div class="img-wrapper">



<a data-gal href="./images/page4-img1_original.jpg"> // Orignialbild - wird beim klick angezeigt





<img src="./images/page4-img1.jpg" alt=""/> // Vorschaubild
<span class="overlay-gallery"></span>

<div class="hover"><span class="fa fa-search-plus"></span>
<h5>Vorschaubild Text</h5>

</div>

</a>


CSS:
a[data-gal] {
display: inline-block;
position: relative;
float: left;
width: 33.3333334%;
}
a[data-gal] .overlay-gallery {
display: block;
background: rgba(0, 0, 0, 0);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.ie8 a[data-gal] .overlay-gallery {
background: none;
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000');
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000');
zoom: 1;
}
a[data-gal] .hover {
left: 0;
top: 50%;
right: 0;
margin-top: -74px;
text-align: center;
position: absolute;
visibility: hidden;
}
a[data-gal] .hover span {
display: inline-block;
font-size: 60px;
line-height: 60px;
color: #d3695c;
margin-bottom: 25px;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
}
a[data-gal] .hover h5 {
padding: 0 50px;
}
@media (min-width: 768px) and (max-width: 979px) {
a[data-gal] .hover h5 {
padding: 0 10px;
}
}
@media (max-width: 767px) {
a[data-gal] .hover h5 {
display: none;
}
}
@media (max-width: 767px) {
a[data-gal] .hover {
margin-top: -30px;
}
}
a[data-gal]:hover .overlay-gallery {
background: rgba(0, 0, 0, 0.5);
}
.ie8 a[data-gal]:hover .overlay-gallery {
background: none;
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000');
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000');
zoom: 1;
}
a[data-gal]:hover .hover {
visibility: visible;
}
@media (max-width: 767px) {
a[data-gal] {
width: 50%;
}
}
@media (max-width: 479px) {
a[data-gal] {
width: 100%;
}
}
.page {
overflow: hidden;
}



Ich hoffe, damit kann jemand etwas anfangen.

Für eine Hilfe wäre ich sehr dankbar.

Gruß,

Mr.Blatt
 
Hallo,

wie soll sich das ganze denn bei Touchscreens verhalten, also Smartphones und Tablets? Die werden zum Surfen ja inzwischen von über 60 % aller User benutzt. Die kennen aber keinen Hover-Effekt.

Gruss

MrMurphy
 
Hey MrMurphy,
danke für deine Antwort.
Stimmt, dass ist heutzutage ein wichtiger Punkt. Allerdings funktioniert die Seite recht gut auf Tablets bzw. Smartphones. Der Effekt wäre jetzt für den PC ganz toll.

Gruß
 
Hey,

das geht nach demselben Prinzip.
Du ordnest dem großen Bild einfach eine ID zu und setzt den Text beim hovern einfach auf 'visible'.

Code: 
#bildgross:hover .hover {
visibility: visible;
}

Natürlich musst du das ganze dann so optimieren, dass das bei allen Bildern funktioniert. Aber das wäre mal das Grundgerüst.

Melde dich einfach bei Fragen ;)
 
Servus Matthias Lang,
vielen Dank für deine Antwort.

Ok das klingt logisch aber wo soll der Text im HTML stehen? Und bezieht sich das "visibility:visible nicht auf das bild ansich"?

Gruß
 
Mr.Blatt schrieb:
Servus Matthias Lang,
vielen Dank für deine Antwort.

Ok das klingt logisch aber wo soll der Text im HTML stehen? Und bezieht sich das "visibility:visible nicht auf das bild ansich"?

Gruß
Zum Vergrößern anklicken....

Hey,

der Text soll im Element .hover stehen. Das hab ich jetzt nur mal so genannt, weil es beim kleinen Bild auch so heißt. Du müsstest jetzt für jedes Bild ein eigenes .hover-Element (z.B. span-Element) erzeugen. Das 'visible' bezieht sich sowohl auf das Bild, als auch auf den Text. Das ist aber egal, da das Bild ja eh schon sichtbar ist. ;)
 
Servus Matthias,
nochmals vielen Dank für deine Mühe.
Leider bekomme ich es einfach nicht hin.
Ich hab dir hier mal den Code nochmal aufgelistet, so wie ich es für logisch erachte:
HTML: 
<a data-gal id="bild1" href="./images/page4-img1_original.jpg">
                            <span class="hover" >Text Hover großes Bild</span>
                               
                                 
                                  
                              
                              
                              
                                <img src="./images/page4-img1.jpg" alt=""/>
                                <span class="overlay-gallery"></span>

                                <div class="hover"><span class="fa fa-search-plus"></span>
                                    <h5>Text Hover kleines Bild </h5>
                                  
                                </div>
                              
                            </a>

Das große Bild erscheint mit einem Klick auf das kleine Bild. Ich glaube die ganze <a> Sektion bezieht sich nur auf das kleine BIld indem das große verlinkt ist. Wenn ich nämlich den Code wie oben verwende sehe ich beim Hover über das kleine Bild nun beide Texte.

Könntest du mir vlt. noch einen Tipp geben?Wäre dir sehr dankbar.

Gruß
 
Code: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Galerie</title>
<style>
* {
margin:0;
padding:0;
list-style:none;
box-sizing:border-box;
text-decoration:none;
border:none;
outline:none;
}

div {
margin:20px;
}

figure {
position:relative;
float:left;
padding:10px;
margin:5px;
border:1px solid #000;
}

figcaption a {
padding:5px;
background:rgba(0,0,0, .5);
color:#fff;
display:none;
position:absolute;top:10px;
left:10px;
right:10px;
bottom:10px;
text-align:center;
}

figure:hover figcaption a, figure:focus figcaption a {
display:block;
}

.img-wrapper img {
display:block;
}
</style>
</head>

<body>
<div class="img-wrapper">
<figure tabindex="0">
<img src="zebra.jpg" alt="" width="200">
<figcaption><a href="zebra.jpg">Vorschaubild Klicken um das Original zu sehen</a></figcaption>
</figure>

<figure tabindex="0">
<img src="zebra.jpg" alt="" width="200">
<figcaption><a href="zebra.jpg">Vorschaubild Klicken um das Original zu sehen</a></figcaption>
</figure>

<figure tabindex="0">
<img src="zebra.jpg" alt="" width="200">
<figcaption><a href="zebra.jpg">Vorschaubild Klicken um das Original zu sehen</a></figcaption>
</figure>
</div>


</body>
</html>

Beispiel: http://www.gipspferd.de/forumhilfe/gal/

@edit: Wenn du Orignalbild als img verlinkst, dann hast du natürlich kein Text. Dazu könntest du eine HTML-Seite mit deinem Originalbild inkl. Text erstellen.
 
Zuletzt bearbeitet:
Hallo Mr. Blatt,

könntest du mir den Code von der ursprünglichen Gallerie (also den ganzen anderen Dateien, die du von der Gallerie hast) zukommen lassen? Dann könnte ich das ganze auf meinem Rechner ausprobieren und dir besser helfen.
 
Matthias Lang schrieb:
Hallo Mr. Blatt,

könntest du mir den Code von der ursprünglichen Gallerie (also den ganzen anderen Dateien, die du von der Gallerie hast) zukommen lassen? Dann könnte ich das ganze auf meinem Rechner ausprobieren und dir besser helfen.
Zum Vergrößern anklicken....

Guten Morgen Matthias,
ich probier jetzt mal den Tipp von djheke. So in etwa hab ich mir das vorgestellt.

Trotzdem vielen Dank für dein Angebot.

Gruß
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben