Erstellen eines Zoomeffekts für ein Bild beim Schweben mit CSS?

87

Ich versuche gerade, einen Zoomeffekt beim Bewegen des Mauszeigers über eines meiner vier Bilder zu erstellen. Das Problem ist, dass die meisten Beispiele normalerweise Tabellen oder Maskendivs verwenden, um einen Effekt anzuwenden.

Hier ist ein Beispiel dafür , dass Geräte , was ich möchte dies .

Dies ist mein bisheriger Code.

HTML

<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" alt="">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png" alt="">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" alt="">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png" alt="">
</div>

CSS

#menu {
    max-width: 1200px;
    text-align: center;
    margin: auto;
}

#menu img {
    width: 250px;
    height: 375px;
    padding: 0px 5px 0px 5px;
    overflow: hidden;
}

.blog {
    height: 375px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.blog:hover {
    cursor: pointer;
    height:475px;
    width: 350px;
}

.music {
    height: 375px;
}

.projects {
    height: 375px;
}

.bio {
    height: 375px;
}

html class css KingPolygon
quelle

163

Was ist mit der Verwendung von CSS3 transformEigenschaften und der Verwendung, scaledie einen zoomähnlichen Effekt erzielen ? Dies kann folgendermaßen erfolgen:

HTML

<div class="thumbnail">
    <div class="image">
        <img  src="http://placehold.it/320x240" alt="Some awesome text"/>
    </div>
</div>

CSS

.thumbnail {
    width: 320px;
    height: 240px;
}

.image {
    width: 100%;
    height: 100%;    
}

.image img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}

.image:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

Hier ist eine Demo- Geige . Ich habe einen Teil des Elements entfernt, um es einfacher zu machen. Sie können jederzeit einen Überlauf hinzufügen .image, um den Überlauf des skalierten Bildes auszublenden.

zoom Eigenschaft funktioniert nur im IE

Mitchell Layzell
quelle

14

Und wenn Sie die Auszeichnung "Deep Life Lessons from Code" gewinnen, singt Ihr CSS "Alles ist einfach, alles ist einfach".

Nerrolken

1

Wie würden Sie Pixelierung verhindern?

Waltari

1

@Waltari Ihre Bildgröße sollte 25% (der Betrag, in den wir zoomen) größer als der Inhaltsbereich sein. Wenn das Miniaturbild also 320 x 240 ist und wir um 25% zoomen, sollte das Bild 400 x 300 sein.

Mitchell Layzell

25

Bitte schön.

Demo

http://jsfiddle.net/27Syr/4/

HTML

<div id="menu">

    <div class="fader">
        <div class="text">
            <p>Yay!</p>
        </div>
        <a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
            <img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" alt="">
        </a>
    </div>

    <div class="fader">
        <div class="text">
            <p>Yay!</p>
        </div>
        <a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
            <img class ="blog" src="http://s18.postimg.org/4st2fxgqh/image.png" alt="">
        </a>
    </div>

    <div class="fader">
        <div class="text">
            <p>Yay!</p>
        </div>
        <a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
            <img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" alt="">
        </a>
    </div>

    <div class="fader">
        <div class="text">
            <p>Yay!</p>
        </div>
        <a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
            <img class ="blog" src="http://s18.postimg.org/5xn4lb37d/image.png" alt="">
        </a>
    </div>

</div>

CSS

#menu {
    text-align: center; }


.fader {
    /* Giving equal sizes to each element */
    width:    250px;
    height:   375px;

    /* Positioning elements in lines */
    display:  inline-block;

    /* This is necessary for position:absolute to work as desired */
    position: relative;

    /* Preventing zoomed images to grow outside their elements */
    overflow: hidden; }


    .fader img {
        /* Stretching the images to fill whole elements */
        width:       100%;
        height:      100%;

        /* Preventing blank space below the image */
        line-height: 0;

        /* A one-second transition was to disturbing for me */
        -webkit-transition: all 0.3s ease;
        -moz-transition:    all 0.3s ease;
        -o-transition:      all 0.3s ease;
        -ms-transition:     all 0.3s ease;
        transition:         all 0.3s ease; }

        .fader img:hover {
            /* Making images appear bigger and transparent on mouseover */
            opacity: 0.5;
            width:   120%;
            height:  120%; }

    .fader .text {
        /* Placing text behind images */
        z-index: -10;     

        /* Positioning text top-left conrner in the middle of elements */
        position: absolute;
        top:      50%;
        left:     50%; }

        .fader .text p {
            /* Positioning text contents 50% left and top relative
               to text container's top left corner */
            margin-top:  -50%; 
            margin-left: -50%; }

Vorschlag

Anstatt .fader { inline-block; }ein Rastersystem in Betracht zu ziehen. Abhängig von Ihrer bevorzugten Technologie können Sie Foundation , Susy , Masonry oder deren Alternativen wählen .

Andrey Mikhaylov - lolmaus
quelle

19

.aku { 
    transition: all .2s ease-in-out; 
}

.aku:hover {
    transform: scale(1.1); 
}

Akhil P.
quelle

16

Ich benutze gerne ein Hintergrundbild. Ich finde es einfacher und flexibler:

DEMO

CSS:

#menu {
    max-width: 1200px;
    text-align: center;
    margin: auto;
}
.zoomimg {
    display: inline-block;
    width: 250px;
    height: 375px;
    padding: 0px 5px 0px 5px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all .5s ease;
}
.zoomimg:hover {
    cursor: pointer;
    background-size: 150% 150%;
}
.blog {
    background-image: url(http://s18.postimg.org/il7hbk7i1/image.png);
}
.music {
    background-image: url(http://s18.postimg.org/4st2fxgqh/image.png);
}
.projects {
    background-image: url(http://s18.postimg.org/sxtrxn115/image.png);
}
.bio {
    background-image: url(http://s18.postimg.org/5xn4lb37d/image.png);
}

HTML:

<div id="menu">
    <div class="blog zoomimg"></div>
    <div class="music zoomimg"></div>
    <div class="projects zoomimg"></div>
    <div class="bio zoomimg"></div>
</div>

DEMO 2 mit Überlagerung

jme11
quelle

Ich würde nicht empfehlen, ein Hintergrundbild dafür zu verwenden. Sie werden all die erstaunliche bildbezogene Suchmaschinenoptimierung verlieren, die mit der Verwendung eines Bild-Tags und von Alt-Attributen einhergeht.

Mitchell Layzell

Ich finde das großartig, aber Sie verlieren den ganzen Nutzen des img-Tags.

Daniel Naab

Wenn das Bild für SEO nicht relevant ist, fand ich diese Lösung sauberer.

NLemay

7

Einfach:

.grow { transition: all .2s ease-in-out; }

Dadurch kann das Element eine Animation über CSS zuweisen.

.grow:hover { transform: scale(1.1); }

Das wird es wachsen lassen!

miksiii
quelle

7

.item:hover img 
{
 -moz-transform: scale(1.3);
 -webkit-transform: scale(1.3);
 transform: scale(1.3);
}

Auf diese Weise können Sie jedes Bild mit einer einfachen Animation zoomen. Wenn Sie ein vollständiges Tutorial benötigen, finden Sie hier ein offizielles Tutorial: http://talkerscode.com/webtricks/image-zoom-in-on-hover-using-css3.php

ramesh
quelle

3

LÖSUNG 1: Sie können Zoom-Master herunterladen .
LÖSUNG 2: Gehen Sie hierher .
LÖSUNG 3: Ihre eigenen Codes

.hover-zoom {
    -moz-transition:all 0.3s;
    -webkit-transition:all 0.3s;
     transition:all 0.3s
 }
.hover-zoom:hover {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
     transform: scale(1.5)
 }

<img class="hover-zoom"  src="https://i.stack.imgur.com/ewRqh.jpg" 
     width="100px"/>

Erweitern Sie das Snippet

Shameem
quelle

0

 -webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;

Ich möchte nur eine Notiz über die oben genannten Übergänge machen, die nur benötigt werden

 -webkit-transition: all 1s ease; /* Safari and Chrome */
transition: all 1s ease;

und -ms- funktioniert sicherlich nicht für IE 9 Ich weiß nicht, woher du diese Idee hast.

DCdaz
quelle

IE10 (die erste stabile Version von IE, die den Übergang unterstützt) erfordert nicht das Präfix -ms-, frühere instabile Builds und das Gleiche für -moz- und -o-. Aktuelle Versionen erfordern dies nicht, frühere Builds jedoch.

Mitchell Layzell

-ms- ist vollständig nicht erforderlich, da es für keinen der IE-Browser eine Lösung bietet, damit der Übergang funktioniert. Sie verwenden das Präfix, um die spezifische Regel zum Laufen zu bringen. Sie werfen sie nicht nur zum Spaß ein.

DCdaz

-MS- ist ein hersteller Präfix , dass sie auf die Freisetzung von IE 10, fallen nun frühere Versionen wie IE bedeutet 9 noch mit dem Verkäufer Präfix verwenden, verwenden viele Menschen leider IE 9 bis heute, wenn es um die kommt transitionIE offiziell gebracht Immobilien transitionin IE 10 erfordert es also nicht. Wenn Sie jedoch 100% sein möchten, gibt es Versionen von IE 9, die instabil sind und diese verwenden -ms-transition.

Mitchell Layzell

1

Das sind falsche Übergänge, die in IE9 mit dem Herstellerpräfix nicht funktionieren. -ms- ist ein völlig sinnloses Präfix für Übergänge.

DCdaz

1

Sehen Sie -ms- irgendwo auch -o- auf dem Opernmobil, dass Übergänge tatsächlich nicht funktionieren, so dass es sinnlos und -moz- für die schnell aufeinanderfolgenden Veröffentlichungen von 2011 sinnlos ist, weil Sie buchstäblich über eine winzige Handvoll Benutzer sprechen, die dies tun werden 100% sind Entwickler und Institutionen, die das Web nicht als allgemeinen Benutzer, sondern für Plattformzwecke nutzen. Dennoch bleibt das Hauptargument -ms- völlig nutzlos und nicht im geringsten erforderlich. Es gibt keine Notwendigkeit für -moz- oder -o- Und es gibt 100% keine Notwendigkeit für -ms-

DCdaz

0

    .img-wrap:hover img {
        transform: scale(0.8);
    }
    .img-wrap img {
        display: block;
        transition: all 0.3s ease 0s;
        width: 100%;
    }

    <div class="img-wrap">
    <img src="http://www.sampleimages/images.jpg"/> // Your image
    </div>

Erweitern Sie das Snippet

Dieser Code ist nur für den Verkleinerungseffekt vorgesehen. Stellen Sie den Div "img-wrap" entsprechend Ihren Stilen ein und fügen Sie den obigen Verkleinerungseffekt für die Stilergebnisse ein. Für den Vergrößerungseffekt müssen Sie den Skalierungswert erhöhen (z. B. für den Vergrößerungseffekt). Verwenden Sie in transform: scale (1.3).

Sreenath
quelle

0

  <div class="item">
  <img src="yamahdi1.jpg" alt="pepsi" width="50" height="58">
  <img src="yamahdi.jpg" alt="pepsi" width="50" height="58">
  <div class="item-overlay top"></div>

CSS:

.item img {

  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.item img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

سیدرسول میرعظیمی
quelle

0

@import url('https://fonts.googleapis.com/css?family=Muli:200,300,400,700&subset=latin-ext');
 body{ font-family: 'Muli', sans-serif; color:white;}
 #lists {
   width: 350px;
   height: 460px;
   overflow: hidden;
   background-color:#222222;
   padding:0px;
   float:left;
    margin: 10px;
 }
 
 .listimg {
   width: 100%;
   height: 220px;
   overflow: hidden;
   float: left;
  
 }
  #lists .listimg img {
   width: 350px;
   height: 220px;
   -moz-transition: all 0.3s;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
 #lists:hover{cursor: pointer;}
 #lists:hover > .listimg img {
   -moz-transform: scale(1.3);
   -webkit-transform: scale(1.3);
   transform: scale(1.3);
   -webkit-filter: blur(5px);
   filter: blur(5px);
 }

#lists h1{margin:20px; display:inline-block; margin-bottom:0px; }
#lists p{margin:20px;}

.listdetail{ text-align:right; font-weight:200; padding-top:6px;padding-bottom:6px;}

<div id="lists">
<div class="listimg">
  <img src="https://lh3.googleusercontent.com/WeEw5I-wk2UO-y0u3Wsv8MxprCJjxTyTzvwdEc9pcdTsZVj_yK5thdtXNDKoZcUOHlegFhx7=w1920-h914-rw">
</div>
<div class="listtext">
<h1>Eyes Lorem Impsum Samet</h1>
<p>Impsum Samet Lorem</p>
</div>
<div class="listdetail">
<p>Click for More Details...</p>
</div>
</div>

<div id="lists">
<div class="listimg">
  <img src="https://lh4.googleusercontent.com/fqK7aQ7auobK_NyXRYCsL9SOpVj6SoYqVlgbOENw6IqQvEWzym_3988798NlkGDzu0MWnR-7nxIhj7g=w1920-h870-rw">
</div>
<div class="listtext">
<h1>Two Frogs Lorem Impsum Samet</h1>
<p>Impsum Samet Lorem</p>
</div>
<div class="listdetail">
<p>More Details...</p>
</div>
</div>

Erweitern Sie das Snippet

Murat Kezli
quelle

0

<!DOCTYPE html>
<html>
<head>
<style>
.zoom {

  overflow: hidden;
}

.zoom img {
  transition: transform .5s ease;
}
.zoom:hover img {
  transform: scale(1.5);
}

</style>
</head>
<body>

<h1>Image Zoom On Hover</h1>
<div class="zoom">
  <img src="/image-path-url" alt="">
</div>

</body>
</html>

Mohidul
quelle

Fügen Sie eine Erklärung hinzu, um Ihre Antwort aus einem Beitrag von geringer Qualität zu entfernen.

Harsha Biyani

-3

Fügen Sie Ihrer Webseite die jQuery-JavaScript-Bibliothek zusammen mit jquery.zbox.css und jquery.zbox.js hinzu.

<link rel="stylesheet" href="jquery.zbox.css">
<script src="jquery.min.js"></script>
<script src="jquery.zbox.min.js"></script>

Fügen Sie der Webseite eine Gruppe von Miniaturansichten mit Links hinzu, die auf Bilder in voller Größe verweisen.

<a class="zb" rel="group" href="1.png" title="Image 1">
  <img src="thumb1.png">
</a>
<a class="zb" rel="group" href="2.png" title="Image 2">
  <img src="thumb2.png">
</a>
<a class="zb" rel="group" href="3.png" title="Image 3">
 <img src="thumb3.png">
</a>

Rufen Sie die Funktion auf Dokument bereit auf. Das ist es.

In der Ansichtsquelle tun Sie:

$(".zb").zbox();

Giri
quelle

2

OP fragte nach einer Möglichkeit, dies in CSS zu tun. Eine jQuery-Antwort ist hier nicht hilfreich.

TylerH

Erstellen eines Zoomeffekts für ein Bild beim Schweben mit CSS?

HTML

CSS

Antworten:

Demo

HTML

CSS

Vorschlag

DEMO

DEMO 2 mit Überlagerung