Hi,
Ich stehe gerade auf dem Schlauch, bei einem Bootstrap-Problem. Vielleicht hat der ein oder andere ja einen Tipp für mich.
Aktueller Stand:
Ich habe auf einer Website eine kleine Image-Animation über Keyframes eingebaut. Meines Erachtens benötige ich für meinen Zweck die absolute Positionierung, aber vielleicht habt ihr ja einen besseren Vorschlag. Im Prinzip geht es um folgende Zeile:
Dazu das passende CSS:
Das bewirkt halt nichts weiter, als dass das Bild in der linken oberen Ecke "eingedreht" wird. Wie gesagt, denke ich, dass das position:absolut; hier angebracht ist.
Das Problem:
...ist, dass das Bild dadurch jetzt aber nicht auf img-responsive reagiert und somit schon bei mittleren Bildschirmauflösungen die Navi überdeckt. Mit z-index zu arbeiten hat mir in dem Fall auch nichts gebracht.
Meine Frage:
Denke ich an dieser Stelle verkehrt? Habt ihr bessere Ansätze?
Ich würde also gerne, dass das Image wie gewollt oben links eingedreht wird, aber mit dem Viewport schrumpft bzw. wächst, wie es ein "normales" .img-responsive halt macht.
Danke
Ich stehe gerade auf dem Schlauch, bei einem Bootstrap-Problem. Vielleicht hat der ein oder andere ja einen Tipp für mich.
Aktueller Stand:
Ich habe auf einer Website eine kleine Image-Animation über Keyframes eingebaut. Meines Erachtens benötige ich für meinen Zweck die absolute Positionierung, aber vielleicht habt ihr ja einen besseren Vorschlag. Im Prinzip geht es um folgende Zeile:
HTML-Code:
<figure class="gimmick hidden-xs hidden-sm"><img class="img-responsive" src="{var:WebRoot}media/images/gimmick.png" alt="..."></figure>
Code:
FIGURE.gimmick { position:absolute; animation:flowin 0.5s forwards; } @keyframes flowin { 0% { top:-500px; left:-300px; transform:rotate(-90deg); } 100% { top:-175px; left:-100px; transform:rotate(-45deg); } }
Das Problem:
...ist, dass das Bild dadurch jetzt aber nicht auf img-responsive reagiert und somit schon bei mittleren Bildschirmauflösungen die Navi überdeckt. Mit z-index zu arbeiten hat mir in dem Fall auch nichts gebracht.
Meine Frage:
Denke ich an dieser Stelle verkehrt? Habt ihr bessere Ansätze?
Ich würde also gerne, dass das Image wie gewollt oben links eingedreht wird, aber mit dem Viewport schrumpft bzw. wächst, wie es ein "normales" .img-responsive halt macht.
Danke
Kommentar