mehrere Klassen einem Div-Tag zuweisen

Jewls · 23 Oktober 2014

Hallo,
Ich habe für meine Seite diese responsive-image-gallery verwendet (bootstrap)...
http://bootsnipp.com/snippets/featured/simple-responsive-image-gallery

Ich möchte nun diese Gallery mit dieser zweiten Mouseover Funktion belegen...
http://jsfiddle.net/UqdVp/1/

Ich bekomme aber die div Klassen nicht funktional kombiniert. Ich weis leider nicht wie sowas verschachtelt wird.
Wie gehe ich das an? Google war für so einen Spezialfall nicht sehr hilfreich :(.

Danke, Jewlz

Chronos · 24 Oktober 2014

Also du möchtest über jedes dieser Bilder in der Galerie einfach nur ein :hover legen, damit dir noch etwas eingeblendet wird ja?
Dann würde ich um die Bilder wie in deinem JSFiddle noch eine Wrapper Klasse packen und dann dass genauso wie im JSFiddle bauen.

Jetzt kurz zum verschachteln da gibt es diese zwei Möglichkeiten:

Code:

.imageWrapper .cornerLink

Das bedeutet das nach der Klasse .imageWrapper eine Ebene tiefer die Klasse .cornerLink kommt.

HTML:

<div class="imageWrapper">
    <a href="http://google.com" class="cornerLink">Link</a>

Code:

.imageWrapper.cornerLink

ohne das Leerzeichen bedeutet das, dass die Klasse auf der selben Ebene angewandt wird.

Da würde dann im HTML stehen müssen

HTML:

<div class="imageWrapper cornerLink">

Hilft dir das so schon weiter?

djheke · 24 Oktober 2014

Meinst du sowas?

Code:

<!doctype html>
<html>
<head>
<title>Lenovo</title>
<meta charset="UTF-8">
<style>
* {
margin:0;
padding:0;
box-sizing:border-box;
}


.imageWrapper {
  position: relative;
  width: 300px;
  height: 300px;
}
.imageWrapper img {
  display: block;
}
.imageWrapper a {
  opacity: 0;
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding: 2px 0px;
  color: #ffffff;
  background: #000000;
  text-decoration: none;
  text-align: center;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
 
}
.imageWrapper:hover a {
  opacity: 0.8;
}

/* hinzugefügt */
a:hover span {
top:-280px;
opacity: 0.8;
}

a span {
position:absolute;
top:-999px;
left:0;
right:0;
background: #000000;
opacity:0;
transition: opacity 500ms;
padding:20px;
}

</style>
</head>
<body>
<div class="imageWrapper">
  <img src="http://lorempixel.com/300/300/" alt="" />
  <a href="http://google.com">Link<span>Hier geht es zur Originaldatei</span></a>
</div>
</body>
</html>

Hier ein Link zum Testen, ob du es auch so möchtest.
http://www.gipspferd.de/forumhilfe/hover.htm

Jewls · 24 Oktober 2014

Vielen Dank für die schnellen Antworten...
Danke Chronos, jetzt habe ich verstanden wie man die Klassen verschachtelt... aber ich finde es schwer den Überblick über alle klassen zu behalten.

Ich habe es nun geschafft, beide :hover zu kombinieren...

...ABER jetzt liegt der :hover effect, welcher den Text einblendet, über dem :hover graystyle effect. Das bedeutet, dass zwar mein Text (LINK) eingeblendet wird, aber er verdeckt den :hover effect der das Bild von s/w auf farbig ändert. Ich verstehe nicht welche div Klasse ich kombinieren muss, damit beides auf einer Ebene arbeitet. Ist das irgendwie verständlich was ich meine?

Code:

.content {
    padding-top: 100px;
}

.imageWrapper {
    position: relative;

}
.imageWrapper img {
    display: block;
}
.imageWrapper .cornerLink {
    opacity: 0;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 2px 0px;
    color: #ffffff;
    font-size: 20pt;
    text-decoration:none;
    font-weight: 800;
    text-align: center;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
   
}

.imageWrapper:hover .cornerLink {
    opacity: 0.8;
}

img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
    -webkit-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
    margin-bottom:20px;
}

img:hover {
  filter: none; /* IE6-9 */
  -webkit-filter: grayscale(0); /* Google Chrome, Safari 6+ & Opera 15+ */
}

HTML:

<div class="content">
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-4 col-xs-6"><div class="imageWrapper"><a href="#"><img class="img-responsive" src="http://2.bp.blogspot.com/-H6MAoWN-UIE/TuRwLbHRSWI/AAAAAAAABBk/89iiEulVsyg/s400/Free%2BNature%2BPhoto.jpg" /></a><a class="cornerLink">LINK</a> </div></div>
          </div>
        </div>
    </div> 
</div>

pax · 24 Oktober 2014

Jewls schrieb:
Ist das irgendwie verständlich was ich meine?

Nö.

Wenn ich den letzten Beispielcode im jsFiddle teste, funktioniert es für meine Wahrnehmung einwandfrei. (Davon abgesehen, dass Link und Image noch eine gemeinsame Breite brauchen).

djheke · 24 Oktober 2014

Kurzform. Nur in Chrome getestet.

Code:

<!doctype html>
<html>
<head>
<title>Lenovo</title>
<meta charset="UTF-8">
<style>
 * {
 margin:0;
 padding:0;
 box-sizing:border-box;
}

.imageWrapper {
  width: 300px;
  height: 300px;
  position: relative;
}

.imageWrapper img {
  -webkit-filter: grayscale(1);
  display: block;
   
}
.imageWrapper:hover img {
  -webkit-filter: grayscale(0);
}

.imageWrapper a span {
  opacity: 0;
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding: 2px 0px;
  color: #ffffff;
  background: #000000;
  text-decoration: none;
  text-align: center;
  z-index:99;
}

.imageWrapper:hover span{
  opacity: 0.8;
}

</style>
</head>
<body>
<div class="imageWrapper">
  <a href="http://google.com"><img src="http://lorempixel.com/300/300/" alt="" /><span>Link</span></a>
   
</div>
</body>
</html>

GEÄNDERT

Jewls · 24 Oktober 2014

Es geht mir darum, dass das Bild bunt wird, auch wenn ich mit der Maus auf den Teil gehe wo dann der schwarze Balken kommt wo "Link" erscheint. Aber noch blockiert ein effect den anderen (zumindest in diesem Bildbereich). Ich möchte diesen Effekt bekommen, wie bei den Bilder auf dieser Seite... http://www.alexanderwang.com/experience/en/pages/studio/latest-news/

Danke nochmal für eure Hilfe

djheke · 24 Oktober 2014

Guckst Du ( hab es geändert )
http://www.gipspferd.de/forumhilfe/hover.htm

Jewls · 24 Oktober 2014

Wunderbar! das ist es! VIELEN DANK :)

mehrere Klassen einem Div-Tag zuweisen

Jewls

Neues Mitglied

Chronos

Aktives Mitglied

djheke

Aktives Mitglied

Jewls

Neues Mitglied

pax

Guest

djheke

Aktives Mitglied

Jewls

Neues Mitglied

djheke

Aktives Mitglied

Jewls

Neues Mitglied

Neueste Beiträge