Hover Effekt

Hallo,

ich habe ein Probelm mit dem Hover Effekt. Ich wollte einen Grow-Effekt wie hier erstellen: "http://designshack.net/?p=36895" , nur leider will es nicht ganz so funktionieren.

.element {
    opacity: 1;
        background-color: #ffffff; 
        transition: all 0.4s ease-in-out;
        width: 270px;
    height: 200px;
    
}




.element img {
      width: 270px;
      height: 200px;


     
    -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
          transition: all 1s ease;


}
.element img:hover {
  width: 400px;
  height: 400px;


}

Meine CSS-Klasse habe ich in einem Textblock im Visual Composer definiert und den o.g. Code CSS-Fenster vom VC eingefügt. Die Fenster bleiben in der Breite fixiert, das Bild wird nur lang nach unten gestreckt.

Wie kann ich diesen Fehler beheben?

Vielen Dank

Hallo,

ich habs jetzt soweit hinbekommen.:http://test.bac.ag/aufrollsysteme-2/ueberflur/

Die Skalierung ist so ok; allerdings funktioniert die Transition( easy-in-out) beim Verlassen des Bildes nicht richtig. Die Breite wird hier ohne Verzögerung zurück gesetzt. Woran könnte das liegen?

* {
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
          -ms-box-sizing: border-box;
    box-sizing: border-box;
}
 
body {
      background: #333;
    }


.preview {
     border: 1px solid #000; 
    width: 270px;  
    height: 180px;
       float: left;
     margin: -5px;
      overflow: hidden;  
    text-align: center;
}


/*ZOOM*/
.preview img {
     width: 270px;
    height:180px;
    opacity: 0.5;
    float: center;
    transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -webkit-transition: all .5s ease-in-out;
}
 
.preview :hover {
    width: 300px;
    height:200px;
    opacity: 1;
}

gruß

Zitat

füge bei .preview :hover noch ein max-width: 300px; hinzu

Hey funktioniert, danke!

Wo finde ich denn die beiden Formatierungen, die hier algemein gelten? Ich nehme an, die werden durch den VC angelegt, da ich den ja verwende um die Grafiken einzubinden?!

Gruß

Ok, also z.B. das addon firebug fon firefox? Ich werden dann erstmal wieder eine Lese-und Lernsession einlegen. :)

Vielen Dank für die Hilfe

Hallo Maria-Anne,

Zitat

Hast Du eine Idee, wie ich das machen könnte?

ich beschäftige mich jetzt seit ca. 1,5 Tagen mit html, php und css und bin daher noch ziemlich unbefleckt.:wink: Trotzdem mal ein Antwortversuch:
Zunächst mal bin ich sicher, dass es diesen und auch so ziemlich alle anderen erdenklichen Hover-effekte in irgendwelchen plugins gibt. Dieser Effekt hier sieht aber relativ simpel aus. Ich denke, man muss ja im Prinzip nur einen Rahmen (border) aus- und einblenden, bzw die Farbe von weiß auf rosa ändern, oder die Breite von 0 auf ein paar pixel ändern...gibt da ja viele Möglichkeiten..
Wenn du z.B. meinen code hier nimmst, und meine "preview"-Klasse dein Bildelement ist, müsstest du halt an Stelle der Transitions, die ich hier habe (opacity und image scale) deinen Rahmen verändern.

Ich hoffe, das hilft dir irgendwie weiter.

Schönen Abend

Hallo ArtofPic,

ich stehe nun vor der nächsten Hürde, die mich etwas verzweifeln lässt:

Ich möchte nun ein Textfeld(.textbox) als eine zweite Klasse mit in den hover-effect mit aufnehmen, und dieses mit (visibility: visible)einblenden, wenn man über .preview hovert. Ist das überhaupt so einfach mit css möglich?

Im Prinzip ist es ja der gleiche Effekt, wie bei einem Menu. (Man hovert über der ersten Ebene und die zweite wird eingblendet) Ich habe nun einiges zum Thema Adressieren von css Klassen, Eltern- und Kinderklassen gelesen, aber komme nicht weiter.

http://test.bac.ag/aufrollsysteme-2/ueberflur/

/*ZOOM*/
.preview img {
     width: 270px;
    height:180px;
    opacity: 0.5;
    float: center;
    transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -webkit-transition: all .5s ease-in-out;
}
 
.preview :hover {
    max-width: 300px;
    width: 300px;
    height:200px;
    opacity: 1;


}




.textbox { 
       background-color: 00ffff; 
        outline: none; 
        padding: 2px 2px; 
        opacity: 1;
    visibility: hidden;


} 
.preview:hover .textbox{
      visibility: visible;
}

Schönen Abend.