zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Fluides IMG beim hovern zoomen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.09.2014, 20:46
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 30.04.2012
Beiträge: 163
schatzi sorgt für eine eindrucksvolle Atmosphäreschatzi sorgt für eine eindrucksvolle Atmosphäre
Standard Fluides IMG beim hovern zoomen

Hallo!

Ich würde gern bei einem <img> beim hovern einen Zoomeffekt einbauen, ohne dass sich dabei die Außenmaße verändern.
Wenn das <img> feste Pixelmaße hätte, wäre das auch gar kein Problem; aber leider soll es in ein fluides Layout eingebaut werden, so dass ich keine konkrete Höhe definieren kann.

Ich habe den Aufbau hier mal auf die entscheidenden Elemente reduziert dargestellt, so dass mein Wunsch hoffentlich deutlich wird:
Edit fiddle - JSFiddle

Durch das "overflow:hidden" bekomme ich zwar die anwachsende Breite in den Griff, nicht aber die anwachsende Höhe.

Gibt es dafür eine Lösung?
Vielen Dank im Voraus für eure Hilfe!

PS: Die Originalbilder sind natürlich nicht alle quadratisch, sondern haben unterschiedliche Formate.
__________________
Gruß schatzi

Geändert von schatzi (10.09.2014 um 21:37 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.09.2014, 03:19
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von schatzi Beitrag anzeigen
Gibt es dafür eine Lösung?
Hallo schatzi,
ich sage mal Nein. Aber vielleicht so: Edit fiddle - JSFiddle

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
    <title>test</title>
    
<style type="text/css">
* { 
   margin: 0; 
   padding: 0; 
}
#content{ 
    background: lime;
    width: 80%;
    margin: 0 auto; 
    overflow: hidden;
    min-width: 500px;
}
figure{
    float: right;
    width: 60%;
}
figure img{
    width: 100%; 
    -webkit-transition: 1s;
    transition: 1s;  
    vertical-align: bottom;
}
figure img:hover{
    width: 110%; 
    margin-bottom: -10%;
}
article{ 
    float: left;
    width: 40%;
}
</style>

</head>
<body>

<div id="content">
<figure>
    <img src="http://www.lorempixel.com/200/200" alt="Hi">
</figure>

<article>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</article>
</div>

</body>
</html>
____________
MfG Roland

Geändert von K.Roland (11.09.2014 um 04:05 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.09.2014, 09:25
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von K.Roland Beitrag anzeigen
Code:
figure img:hover{
    margin-bottom: -10%;
}
Eine sehr gute Idee.
„overflow: hidden;“ würde ich allerdings beim „figure“ notieren. Denn es kann durchaus sein, dass der Textteil länger wird, oder weitere Elementen darunter kommen.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #4 (permalink)  
Alt 11.09.2014, 12:51
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von etux Beitrag anzeigen
„overflow: hidden;“ würde ich allerdings beim „figure“ notieren.
O.K. Dan sollte schatzi nicht vergessen zu clearen.

@: schatzi
Teste selbst mal, indem du Content eine Hintergrundfarbe gibst.

oder:
Code:
}
#content{ 
    background: lime; 
    border: 4px solid #000; 
    padding: 10px;
}
____________
MfG Roland
Mit Zitat antworten
  #5 (permalink)  
Alt 11.09.2014, 17:33
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 30.04.2012
Beiträge: 163
schatzi sorgt für eine eindrucksvolle Atmosphäreschatzi sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo!
Zitat:
Zitat von K.Roland Beitrag anzeigen
O.K. Dan sollte schatzi nicht vergessen zu clearen.
Klar, im Original cleart der #content natürlich; das hatte ich versehentlich im jsFiddle vergessen.

Die Idee mit dem negativen Margin ist in der Tat sehr clever und ich werde sie auf jeden Fall im Hinterkopf behalten. Allerdings funktioniert diese Idee natürlich nur dann richtig gut, wenn das Bild quadratisch ist. Bei Bildern im Quer- oder Hochkant-Format klappt das dann leider nicht mehr vernünftig...

Dennoch natürlich vielen Dank für diesen Vorschlag! Vielleicht kann ich den mal bei einem anderen Projekt verwenden.
__________________
Gruß schatzi
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
rahmen um bilder- was mache ich falsch? R0sa CSS 3 19.11.2012 17:35
Dreamweaver zerreist Listenstruktur in Vorschau ICurtius Site- und Layoutcheck 9 15.10.2012 11:44
Responsive webdesign: horizontales Menü mit angepasster Schriftgröße Spencer Javascript & Ajax 3 19.09.2012 00:16
CSS Links border-bottom auf Img ausschalten nicht möglich? Andimau CSS 1 15.06.2012 18:00
ie. Abstand über horizontaler Navi geht nicht weg. tifi CSS 5 21.11.2006 18:17


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:26 Uhr.