Wie bekomme ich den Effekt hin?

[Ripperz]

Moin,
kann mir einer kurz sagen wie ich diesen Hover effekt hinbekomme, bei den Bildern.
http://www.discavo.de/

Brauche ich dafür JS oder geht das auch mit reinem CSS?

[w3scout]

Javascript ist dafür nicht nötig. Sowas bekommst man mit CSS3 Transitions hin.

VG

[derRenner]

Hallo,

ist mit ein wenig CSS bei hover und transition realisierbar.
Schau dir mit einem Webtool im Browser die DIV-Struktur an und lass das zweite DIV bei hover nach oben sliden ...

[Ripperz]

Hallo

Schau dir mit einem Webtool im Browser die DIV-Struktur an und lass das zweite DIV bei hover nach oben sliden ...

habe ich mir schon angeschaut. Grundlegend sollte ich das hinbekommen. Nur wie bekomme ich das nach oben hovern hin?

[derRenner]

indem du das überlagernde div z.b. via position:absolute und top:xxpx nach unten schiebst und bei hover dann das top:xxpx nach oben holst
Möglicherweise ist das auch via margin-top möglich ... müsstest dich ein wenig nach deinem Konstrukt richten

[magicsepp]

Öfter mal was neues:
http://www discavo de/
Antwort auf
assets/20/bower_components/fastclick/lib/fastclick.js

499 Request has been forbidden by antivirus

[snack]

Schau mal ob du damit klar kommst.

<a href="link.html" class="flydown">
<div class="collapse" id="bg_rubrik_1">
<div class="om"><h2>Wintergarten</h2>
<div class="flydown_more">nähere Informationen zu Wintergärten Wohnraumwintergarten<br>Bilder von Wintergärten </div></div></div></a>





a.flydown div.om{width:300px;background-image:url("../../files/webimages/flydown.png")}

/* flydown */
a.flydown div.collapse {
width:300px;
height:200px;
float:left;
/*margin:10px 10px 0;*/
margin:10px 20px 10px 0;
background-position:0 bottom;
background-repeat:no-repeat;
/*background-color:#007fc5;*/
}
a.flydown div.om {
background-position:0 -122px;
width:300px;
height:200px;
background-repeat:no-repeat;
}
a.flydown:hover div.om{
background-position:0 -5px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
a.flydown h2 {
margin:0px;
padding:17px 13px 8px 17px;
font-size:18px;
color:#ffffff;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;
}

a.flydown div.flydown_more{
padding:0 8px 0 17px;
opacity:0;
filter:alpha(opacity=0); /* For IE8 and earlier */
* position:absolute;
* left:-30000px;
color:#ffffff;
line-height:14px;
}

a.flydown:hover div.flydown_more{
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
* position:relative;
* left:auto;
}