Tạo Hiệu ứng Thu phóng trên hình ảnh khi di chuột bằng CSS?

87

Tôi hiện đang cố gắng tạo hiệu ứng thu phóng khi di chuột qua một trong bốn hình ảnh của mình. Vấn đề là hầu hết các ví dụ thường sử dụng bảng hoặc mặt nạ div để áp dụng một số loại hiệu ứng.

Đây là một ví dụ thực hiện những gì tôi muốn thế này .

Đây là mã của tôi cho đến nay.

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
nguồn

Câu trả lời:

163

Còn về việc sử dụng thuộc CSS3 transformtính và sử dụng scalecái nào không cho hiệu ứng như thu phóng, điều này có thể được thực hiện như vậy,

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

Đây là một trò chơi thử nghiệm . Tôi đã loại bỏ một số phần tử để làm cho nó đơn giản hơn, bạn luôn có thể thêm phần tràn ẩn vào phần .imageđể ẩn phần tràn của hình ảnh được chia tỷ lệ.

zoom thuộc tính chỉ hoạt động trong IE

— Mitchell Layzell
nguồn
14
Và giành được giải thưởng "bài học cuộc sống sâu sắc từ mã", CSS của bạn đang hô vang "Tất cả đều dễ dàng, tất cả đều dễ dàng."
— Nerrolken
1
Làm thế nào bạn sẽ ngăn chặn pixelation?
— Waltari
1
@Waltari kích thước hình ảnh của bạn phải lớn hơn 25% (số lượng chúng tôi đang phóng to) so với diện tích nội dung, vì vậy nếu hình thu nhỏ là 320x240 và chúng tôi đang phóng to 25% thì hình ảnh phải là 400x300.
— Mitchell Layzell
25

Của bạn đây.

Bản giới thiệu

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

Gợi ý

Thay vì .fader { inline-block; }xem xét sử dụng một số hệ thống lưới. Dựa trên công nghệ ưa thích của bạn, bạn có thể chọn Foundation , Susy , Masonry hoặc các lựa chọn thay thế của chúng.

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

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

Tôi thích sử dụng một hình nền. Tôi thấy nó dễ dàng và linh hoạt hơn:

BẢN GIỚI THIỆU

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 với Lớp phủ

— jme11
nguồn
Tôi không khuyên bạn nên sử dụng hình nền cho việc này, bạn sẽ mất tất cả SEO liên quan đến hình ảnh tuyệt vời đi kèm với việc sử dụng thẻ hình ảnh và các thuộc tính alt.
— Mitchell Layzell
Tôi nghĩ điều này thật tuyệt, nhưng bạn sẽ mất tất cả tiện ích của thẻ img.
— Daniel Naab,
Nếu hình ảnh không liên quan đến SEO, tôi thấy giải pháp này rõ ràng hơn.
— NLemay
7

Đơn giản:

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

Điều này sẽ cho phép phần tử gán hoạt ảnh qua css.

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

Điều này sẽ làm cho nó phát triển!

— miksiii
nguồn
3

GIẢI PHÁP 1: Bạn có thể tải xuống zoom-master .
GIẢI PHÁP 2: Vào đây .
GIẢI PHÁP 3: Mã của riêng bạn

.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"/>
Mở rộng đoạn mã


— Xấu hổ
nguồn
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;

chỉ muốn ghi chú những chuyển đổi trên chỉ cần

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

và -ms- chắc chắn không hoạt động cho IE 9 Tôi không biết bạn lấy ý tưởng đó từ đâu.

— DCdaz
nguồn
IE10 (phiên bản ổn định đầu tiên của IE hỗ trợ quá trình chuyển đổi) không yêu cầu tiền tố -ms-, các bản dựng không ổn định trước đây cũng vậy và tương tự với -moz- và -o-, các phiên bản hiện tại không yêu cầu nhưng các bản dựng trước thì có.
— Mitchell Layzell
-ms- hoàn toàn không bắt buộc vì nó không cung cấp giải pháp cho bất kỳ trình duyệt IE nào để quá trình chuyển đổi hoạt động. Bạn sử dụng tiền tố để quy tắc cụ thể hoạt động, bạn không chỉ ném chúng vào cho vui.
— DCdaz
-ms- là tiền tố nhà cung cấp mà họ đã bỏ khi phát hành IE 10, có nghĩa là các phiên bản trước đó như IE 9 vẫn sử dụng tiền tố nhà cung cấp, nhiều người buồn bã sử dụng IE 9 cho đến ngày nay, bây giờ khi nói đến transitiontính năng IE chính thức đưa transitionvào IE 10 nên không yêu cầu nó, tuy nhiên nếu bạn muốn 100% thì vẫn có những phiên bản IE 9 không ổn định để sử dụng -ms-transition.
— Mitchell Layzell
1
Đó là sự chuyển đổi sai không hoạt động trong IE9 với tiền tố của nhà cung cấp. -ms- là một tiền tố hoàn toàn vô nghĩa cho quá trình chuyển đổi.
— DCdaz
1
Bạn có thấy -ms- ở bất cứ đâu cũng có -o- trên di động opera thực sự không làm cho quá trình chuyển đổi hoạt động vì vậy nó vô nghĩa và -moz- cho các bản phát hành 2011 liên tiếp nhanh chóng là vô nghĩa bởi vì bạn đang nói về một số ít người dùng sẽ 100% là các nhà phát triển & tổ chức không sử dụng web như một người dùng thông thường mà cho các mục đích nền tảng. Nhưng đối số chính vẫn là -ms- là hoàn toàn vô ích và không cần thiết. không có nhu cầu cho -moz- hoặc -o- Và có 100% không cần -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>
Mở rộng đoạn mã

Mã này chỉ dành cho hiệu ứng thu nhỏ. Đặt div "img-wrap" theo kiểu của bạn và chèn hiệu ứng thu nhỏ kết quả kiểu ở trên. Để có hiệu ứng phóng to, bạn phải tăng giá trị tỷ lệ (ví dụ: để thu phóng- trong, sử dụng biến đổi: scale (1.3);

— Sreenath
nguồn
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);
}
— سیدرسول میرعظیمی
nguồn
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>
Mở rộng đoạn mã

— Murat Kezli
nguồn
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
nguồn
Thêm một số giải thích để xóa câu trả lời của bạn khỏi bài đăng chất lượng thấp.
— Harsha Biyani
-3

Thêm thư viện JavaScript jQuery cùng với jquery.zbox.css và jquery.zbox.js vào trang web của bạn.

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

Thêm một nhóm hình thu nhỏ với các liên kết trỏ đến các hình ảnh có kích thước đầy đủ vào trang 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>

Gọi hàm trên tài liệu đã sẵn sàng. Đó là nó.

Trong nguồn xem làm:

$(".zb").zbox();
— Giri
nguồn
2
OP đã yêu cầu một cách để thực hiện điều này trong CSS. Câu trả lời jQuery không hữu ích ở đây.
— TylerH
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.