• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Softer Zoom bei Mouseover

Status
Für weitere Antworten geschlossen.
M

micky_98

Neues Mitglied
Hallo zusammen,

durch Zufall habe ich heute beim Surfen einen spannenden Effekt entdeckt, den ich gerne auch für meine Webseite nutzen würde: http://hildebrandt-film.de/portfolio.html

Es geht um den soften Zoom und auch das Wechseln von s/w in Farbe der Grafiken beim Mouseover.

Ich persönlich kann Codes in HTML / JavaScript bei meiner Homepage verwenden. Kann mir jemand auf die Sprünge helfen, wie oben gezeigter Effekt umzusetzen ist?

Beste Grüße,
micky_98
 
Zuletzt bearbeitet:
Werbung:
Hallo Micky_98,

schau mal unter https://jsfiddle.net/3f7cL9w1/

Du musst lediglich dem Bild eine Klasse oder ID zuweisen und diese dann per CSS mit Eigenschaft 'Transsition' bzw. 'Transform' versehen.

In dem Fall sorgt Transsition dafür, dass das Bild über einen Zeitraum von 1,5s herangezoom wird.
Die Transform-Eigenschaft zieht das Bild um den Faktor 2 auf.

.grow {
margin: 200px;
transition: all 1.5s ease-in-out; }
.grow:hover { transform: scale(2.0); }

Grüße,
AgnusMacGyver
 
Werbung:
Hallo ihr zwei!

Danke zunächst einmal für eure Antworten!

Besonders der Link von Fry gefällt mir gut, aufgrund der Fülle an verschiedenen Effekte.

Da ich nicht gerade ein Überflieger in HTML-Programmierung bin, bekomme ich es trotz der gegebenen Quelltexte irgendwie nicht hin. Was muss ich genau in das Quelltext-Fenster meines Webeditors eingeben? Ich habe jetzt mehrere Versionen aus den Quelltext-Teilen ausprobiert, es wird jedoch immer nur das Foto angezeigt, der Effekt funktioniert nicht...

Hoffe, ihr könnt mir helfen..

micky_98
 
Zeige mal deinen bisherigen Versuch/deine bisherigen Versuche/deinen Ansatz, damit wir dir weiterhelfen können
 
Hallo felixprogram,

na ich habe einfach die "Bauteile" vom Link weiter oben genutzt:

CSS: 
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background: #333;
}

.pic {
  border: 10px solid #fff; 
  float: left;
  height: 300px;
  width: 300px;
  margin: 20px;
  overflow: hidden;
  -webkit-box-shadow: 5px 5px 5px #111;
          box-shadow: 5px 5px 5px #111; 
}

HTML: 
<div class="grow pic">
  <img src="[URL]http://lorempixel.com/400/400/people/9[/URL]" alt="portrait">
</div>

CSS: 
/*GROW*/
.grow img {
  height: 300px;
  width: 300px;

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

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

Viele Grüße,

micky_98
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Code: 
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Zoom</title>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #333;
}

.pic {
border: 10px solid #fff;
float: left;
height: 300px;
width: 300px;
margin: 20px;
overflow: hidden;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}
/*GROW*/
.grow img {
height: 300px;
width: 300px;

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

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

</style>
</head>
<body>
<div class="grow pic">
<img src="http://lorempixel.com/400/400/people/9" alt="portrait">
</div>
</body>
</html>

Wobei du die CSS Angaben in einer externen Datei schreiben solltest.
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben