Mouseover-Effekt Galerie

Mr.Blatt · 28. Juli 2015 um 08:11

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:

// Orignialbild - wird beim klick angezeigt

             <img src="./images/page4-img1.jpg" alt=""/>    // Vorschaubild

Vorschaubild Text

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

MrMurphy · 28. Juli 2015 um 10:05

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

Mr.Blatt · 28. Juli 2015 um 10:14

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ß

Matthias_Lang · 28. Juli 2015 um 20:47

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‘.

#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

Mr.Blatt · 29. Juli 2015 um 12:56

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ß

Matthias_Lang · 29. Juli 2015 um 14:24

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.

Mr.Blatt · 30. Juli 2015 um 14:26

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]
Text Hover großes Bild

                            <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>[/HTML]

Das große Bild erscheint mit einem Klick auf das kleine Bild. Ich glaube die ganze 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ß

djheke · 30. Juli 2015 um 15:53

<!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.

Mr.Blatt · 30. Juli 2015 um 16:22

Ja genau, doch ich würd gern beim „großen“ Zebrabild auch eine Hoverfunktion mit Text haben.

Gruß

Matthias_Lang · 30. Juli 2015 um 16:28

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.

djheke · 30. Juli 2015 um 17:23

Du hast. doch schon alles, was du brauchst. Etin bissel Eigeninitiative wär nicht schlecht.
Hier noch eine Möglichkeit mit only CSS. www.gipspferd.de/forumhilfe/gal/index2.htm

Mr.Blatt · 31. Juli 2015 um 07:20

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ß