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

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;
}

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

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 .

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

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

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

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!

.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

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"/>

 -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.

    .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>

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).

  <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);
}

<!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>

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();