Membuat Efek Zoom pada gambar saat hover menggunakan CSS?

87

Saat ini saya mencoba membuat efek zoom saat mengarahkan kursor ke salah satu dari empat gambar saya. Masalahnya adalah sebagian besar contoh biasanya menggunakan tabel atau mask div untuk menerapkan semacam efek.

Inilah salah satu contoh yang mengimplementasikan apa yang saya suka ini .

Ini adalah kode saya sejauh ini.

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
sumber

Jawaban:

165

Bagaimana dengan menggunakan CSS3 transformproperti dan penggunaan scaleyang tidak memberikan efek seperti zoom, ini bisa dilakukan seperti itu,

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

Ini biola demo . Saya menghapus beberapa elemen untuk membuatnya lebih sederhana, Anda selalu dapat menambahkan luapan tersembunyi ke .imageuntuk menyembunyikan luapan gambar berskala.

zoom properti hanya berfungsi di IE

— Mitchell Layzell
sumber
14
Dan memenangkan penghargaan "pelajaran kehidupan mendalam dari kode", CSS Anda meneriakkan "Semua mudah, semua mudah."
— Nerrolken
1
Bagaimana Anda mencegah pixelation?
— Waltari
1
@Waltari, ukuran gambar Anda harus 25% (jumlah yang kami perbesar) lebih besar dari area konten, jadi jika thumbnail 320x240 dan kami memperbesar 25%, gambar harus 400x300.
— Mitchell Layzell
25

Ini dia.

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

Saran

Daripada .fader { inline-block; }mempertimbangkan untuk menggunakan beberapa sistem grid. Berdasarkan teknologi preferensi Anda, Anda dapat menggunakan Foundation , Susy , Masonry atau alternatifnya.

— Andrey Mikhaylov - lolmaus
sumber
19 
.aku { 
    transition: all .2s ease-in-out; 
}

.aku:hover {
    transform: scale(1.1); 
}
— Akhil P.
sumber
16

Saya suka menggunakan gambar latar belakang. Saya merasa lebih mudah dan lebih fleksibel:

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 dengan Overlay

— jme11
sumber
Saya tidak akan merekomendasikan menggunakan gambar latar belakang untuk ini, Anda akan kehilangan semua gambar SEO terkait yang luar biasa yang datang dengan menggunakan tag gambar dan atribut alt.
— Mitchell Layzell
Saya rasa ini bagus, tetapi Anda kehilangan semua utilitas dari tag img.
— Daniel Naab
Jika gambar tidak relevan untuk SEO, saya menemukan solusi ini lebih bersih.
— NLemay
7

Secara sederhana:

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

Ini akan memungkinkan elemen untuk menetapkan animasi melalui css.

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

Ini akan membuatnya tumbuh!

— miksiii
sumber
4

SOLUSI 1: Anda dapat mengunduh zoom-master .
SOLUSI 2: Pergi ke sini .
SOLUSI 3: Kode Anda sendiri

.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"/>
Luaskan cuplikan


— Shameem
sumber
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;

hanya ingin membuat catatan tentang transisi di atas saja

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

dan -ms- pasti doenst bekerja untuk IE 9 saya tidak tahu dari mana Anda mendapatkan ide itu.

— DCdaz
sumber
IE10 (versi stabil IE pertama yang mendukung transisi) tidak memerlukan awalan -ms-, versi tidak stabil sebelumnya lakukan dan hal yang sama berlaku untuk -moz- dan -o-, versi saat ini tidak memerlukan tetapi versi sebelumnya memerlukan.
— Mitchell Layzell
-ms- sama sekali tidak diperlukan karena tidak menawarkan solusi untuk browser IE mana pun agar transisi tersebut berfungsi. Anda menggunakan awalan untuk mendapatkan aturan tertentu agar bekerja, Anda tidak hanya memasukkannya untuk bersenang-senang.
— DCdaz
-ms- adalah awalan vendor yang mereka lepaskan pada rilis IE 10, artinya versi sebelumnya seperti IE 9 masih menggunakan awalan vendor, sayangnya banyak orang menggunakan IE 9 hingga hari ini, sekarang ketika datang ke transitionproperti IE secara resmi dibawa transitionmasuk IE 10 jadi ada untuk itu tidak membutuhkannya, namun jika ingin 100% ada versi IE 9 yang tidak stabil yang menggunakan -ms-transition.
— Mitchell Layzell
1
Transisi palsu itu tidak berfungsi di IE9 dengan awalan vendor. -ms- adalah awalan yang sama sekali tidak berguna untuk transisi.
— DCdaz
1
Apakah Anda melihat -ms- di mana saja juga -o- di opera seluler sebenarnya tidak membuat transisi berfungsi sehingga tidak ada gunanya dan -moz- untuk rilis cepat berturut-turut tahun 2011 tidak ada gunanya karena Anda benar-benar berbicara tentang segelintir pengguna yang mau 100% menjadi pengembang & institusi tidak menggunakan web sebagai pengguna umum tetapi untuk tujuan platform. Tapi tetap saja argumen utamanya tetap -ms- sama sekali tidak berguna dan tidak diperlukan sedikit pun. tidak perlu -moz- atau -o- Dan tidak perlu 100% untuk -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>
Luaskan cuplikan

Kode ini hanya untuk efek zoom-out. Atur div "img-wrap" sesuai dengan gaya Anda dan masukkan efek zoom-out hasil gaya di atas. Untuk efek zoom-in Anda harus meningkatkan nilai skala (misalnya: untuk zoom- di, gunakan transform: scale (1.3);

— Sreenath
sumber
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);
}
— سیدرسول میرعظیمی
sumber
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>
Luaskan cuplikan

— Murat Kezli
sumber
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
sumber
Tambahkan beberapa penjelasan untuk menghapus jawaban Anda dari postingan berkualitas rendah.
— Harsha Biyani
-3

Tambahkan pustaka JavaScript jQuery bersama dengan jquery.zbox.css dan jquery.zbox.js ke halaman web Anda.

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

Tambahkan sekelompok thumbnail dengan link yang mengarah ke gambar berukuran penuh ke dalam halaman web.

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

Panggil fungsi pada dokumen siap. Itu dia.

Di sumber tampilan lakukan:

$(".zb").zbox();
— Giri
sumber
2
OP meminta cara untuk melakukan ini di CSS. Jawaban jQuery tidak membantu di sini.
— TylerH
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.