Hallo zusammen,
habe bei mir gerade einen komischen Fehler. Ich versuche gerade folgenden Effekt nachzustellen.
Ich habe ein Bild mit einem Text drauf. Auf dem Bild liegt ein anderes Bild, das transparent ist, bis auf die Mitte. Wenn man mit der Maus über das Bild / den Text kommt, soll das transparente Bild sich soweit vergrößern, dass das andere Bild "normal" zu sehen ist. Ich hoffe man kann das verstehen.
Ich habe es so versucht:
Wollte den Effekt so erzielen, dass der DIV Container indem sich das "expandable" Bild befindet sich vergrößert.
Mit der Breite funktioniert es auch. Nur nicht mit der Höhe. Wenn die Fensterbreite kleiner wird, bleibt oben ein grau-transparenter Rand und wenn das Fenster sehr breit wird, bleibt unten ein Rand. Und ich frage mich jetzt, wieso es von der Fensterbreite abhängt, und warum es bei "width" funktioniert...
habe bei mir gerade einen komischen Fehler. Ich versuche gerade folgenden Effekt nachzustellen.
Ich habe ein Bild mit einem Text drauf. Auf dem Bild liegt ein anderes Bild, das transparent ist, bis auf die Mitte. Wenn man mit der Maus über das Bild / den Text kommt, soll das transparente Bild sich soweit vergrößern, dass das andere Bild "normal" zu sehen ist. Ich hoffe man kann das verstehen.
Ich habe es so versucht:
HTML:
<div class="container">
<div class="img">
<div>
<img src="img/expandable.png">
</div>
<div class="img_inner">
<h2> Titel </h2>
<h3> Untertitel </h3>
</div>
</div>
</div>
CSS:
.container {
width: 96%;
height: 50%;
margin-left: 2%;
}
.container > div {
float: left;
display: block;
}
.container .img {
position: relative;
overflow: hidden;
}
.container .img div {
width: 100% !important;
height: 100% !important;
}
.container .img div:first-child {
position: relative;
margin: 0 !important;
padding: 0 !important;
}
.container .img img {
width: 100%;
height: 100%;
margin: 0 !important;
padding: 0 !important;
transition: all 900ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
.container .img .img_inner {
position: absolute;
width: 71% !important;
height: 65% !important;
top: 18%;
left: 15%;
padding: 12px;
border: 16px solid #fff;
color: #fff;
transition: all 900ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
.container h2, h3 {
text-align: center;
}
.container .img:hover div img {
width: 144% !important;
height: 144% !important;
margin-top: -22% !important;
margin-left: -22% !important;
}
.container .img:hover .img_inner {
width: 100% !important;
height: 100% !important;
top: 0% !important;
left: 0% !important;
border-width: 0px;
}
Wollte den Effekt so erzielen, dass der DIV Container indem sich das "expandable" Bild befindet sich vergrößert.
Mit der Breite funktioniert es auch. Nur nicht mit der Höhe. Wenn die Fensterbreite kleiner wird, bleibt oben ein grau-transparenter Rand und wenn das Fenster sehr breit wird, bleibt unten ein Rand. Und ich frage mich jetzt, wieso es von der Fensterbreite abhängt, und warum es bei "width" funktioniert...
Zuletzt bearbeitet: