การสร้างเอฟเฟกต์การซูมให้กับภาพเมื่อวางเมาส์เหนือโดยใช้ CSS?


87

ขณะนี้ฉันกำลังพยายามสร้างเอฟเฟ็กต์การซูมโดยวางเมาส์เหนือรูปภาพหนึ่งในสี่ภาพของฉัน ปัญหาคือตัวอย่างส่วนใหญ่มักใช้ตารางหรือมาสก์ div เพื่อใช้เอฟเฟกต์บางประเภท

นี่คือตัวอย่างหนึ่งที่ดำเนินการในสิ่งที่ฉันต้องการนี้

นี่คือรหัสของฉันจนถึงตอนนี้

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

คำตอบ:


165

สิ่งที่เกี่ยวกับการใช้CSS3 transformคุณสมบัติและการใช้scaleที่ไม่ดีให้เอฟเฟกต์การซูมเช่นนี้สามารถทำได้เช่นนั้น

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

นี่คือการสาธิตซอ ฉันลบองค์ประกอบบางส่วนออกเพื่อให้ง่ายขึ้นคุณสามารถเพิ่มส่วนเกินที่ซ่อนอยู่.imageเพื่อซ่อนส่วนที่ล้นของรูปภาพที่ปรับขนาดได้

zoom คุณสมบัติใช้ได้เฉพาะใน IE


14
และได้รับรางวัล "บทเรียนชีวิตเชิงลึกจากโค้ด" CSS ของคุณกำลังร้องว่า "All is easy, all is easy."
Nerrolken

1
คุณจะป้องกันพิกเซลได้อย่างไร?
Waltari

1
@ Waltari ขนาดภาพของคุณควรเป็น 25% (จำนวนที่เรากำลังซูมเข้า) ใหญ่กว่าพื้นที่เนื้อหาดังนั้นหากภาพขนาดย่อเป็น 320x240 และเรากำลังขยาย 25% ภาพควรเป็น 400x300
Mitchell Layzell

25

จัดให้เลย

การสาธิต

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

ข้อเสนอแนะ

แทนที่จะ.fader { inline-block; }พิจารณาใช้ระบบกริดบางส่วน ขึ้นอยู่กับเทคโนโลยีที่คุณต้องการคุณสามารถไปที่Foundation , Susy , Masonryหรือทางเลือกอื่น ๆ



16

ฉันชอบใช้ภาพพื้นหลัง ฉันคิดว่ามันง่ายและยืดหยุ่นกว่า:

การสาธิต

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 พร้อมโอเวอร์เลย์


ฉันไม่แนะนำให้ใช้ภาพพื้นหลังสำหรับสิ่งนี้คุณจะต้องสูญเสีย SEO ที่เกี่ยวข้องกับรูปภาพที่น่าทึ่งทั้งหมดที่มาพร้อมกับการใช้แท็กรูปภาพและแอตทริบิวต์ alt
Mitchell Layzell

ฉันคิดว่านี่เป็นสิ่งที่ดี แต่คุณสูญเสียอรรถประโยชน์ของแท็ก img ทั้งหมด
Daniel Naab

หากรูปภาพไม่เกี่ยวข้องกับ SEO ฉันพบว่าโซลูชันนี้สะอาดกว่า
NLemay

7

เพียงแค่:

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

สิ่งนี้จะช่วยให้องค์ประกอบสามารถกำหนดภาพเคลื่อนไหวผ่าน css

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

สิ่งนี้จะทำให้โตขึ้น!


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

ด้วยวิธีนี้คุณสามารถซูมภาพใด ๆ ด้วยภาพเคลื่อนไหวง่ายๆ หากคุณต้องการบทช่วยสอนที่สมบูรณ์นี่คือบทช่วยสอนอย่างเป็นทางการ: http://talkerscode.com/webtricks/image-zoom-in-on-hover-using-css3.php


4

โซลูชันที่ 1:คุณสามารถดาวน์โหลดซูมต้นแบบ
โซลูชันที่ 2: ไปที่นี่
โซลูชันที่ 3: รหัสของคุณเอง

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



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;  

เพียงแค่ต้องการจดบันทึกเกี่ยวกับการเปลี่ยนภาพด้านบนเท่านั้นที่ต้องการ

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

และ -ms- ทำงานได้ดีที่สุดสำหรับ IE 9 ฉันไม่รู้ว่าคุณได้แนวคิดนั้นมาจากไหน


IE10 (IE เวอร์ชันเสถียรรุ่นแรกที่รองรับการเปลี่ยน) ไม่จำเป็นต้องใช้คำนำหน้า -ms- การสร้างที่ไม่เสถียรก่อนหน้านี้ทำและเช่นเดียวกันสำหรับ -moz- และ -o- เวอร์ชันปัจจุบันไม่ต้องการ แต่การสร้างก่อนหน้านี้ทำ
Mitchell Layzell

-ms- ไม่จำเป็นต้องใช้อย่างสมบูรณ์เนื่องจากไม่มีวิธีแก้ปัญหาสำหรับเบราว์เซอร์ IE ใด ๆ เพื่อให้สามารถเปลี่ยนไปใช้งานได้ คุณใช้คำนำหน้าเพื่อให้กฎเฉพาะทำงานได้โดยที่คุณไม่เพียงแค่โยนมันเพื่อความสนุกสนาน
DCdaz

-ms- เป็นผู้ขายคำนำหน้าว่าพวกเขาลดลงในการเปิดตัวของ IE 10 ที่มีความหมายเช่นเดียวกับรุ่นก่อนหน้า IE 9 ยังคงใช้คำนำหน้าผู้ขายหลายคนเศร้าใช้ IE 9 ไปในวันนี้ตอนนี้เมื่อมันมาถึงtransitionคุณสมบัติ IE นำอย่างเป็นทางการtransitionใน IE 10 จึงมีให้มันไม่ต้องใช้มัน แต่ถ้าคุณต้องการที่จะเป็น 100% มีรุ่นของ IE 9 -ms-transitionที่มีความไม่แน่นอนว่าการใช้งาน
Mitchell Layzell

1
การเปลี่ยนที่ผิดพลาดนั้นใช้ไม่ได้ใน IE9 ด้วยคำนำหน้าผู้ขาย -ms- เป็นคำนำหน้าที่ไม่มีจุดหมายโดยสิ้นเชิงสำหรับการเปลี่ยน
DCdaz

1
คุณเห็น -ms- ที่ใดก็ได้เช่นกัน -o- บนมือถือโอเปร่าจริง ๆ แล้วไม่ได้ทำให้การเปลี่ยนภาพทำงานได้ดังนั้นมันไม่มีจุดหมายและ -moz- สำหรับการเผยแพร่อย่างรวดเร็วต่อเนื่องในปี 2011 นั้นไม่มีจุดหมายเพราะคุณกำลังพูดถึงผู้ใช้เพียงไม่กี่คนที่จะ 100% เป็นนักพัฒนาและสถาบันที่ไม่ได้ใช้เว็บในฐานะผู้ใช้ทั่วไป แต่เพื่อวัตถุประสงค์ด้านแพลตฟอร์ม แต่ข้อโต้แย้งหลักยังคงอยู่ -ms- ไม่มีประโยชน์โดยสิ้นเชิงและไม่จำเป็นต้องใช้เพียงเล็กน้อย ไม่จำเป็นต้อง -moz- หรือ -o- และไม่มีความจำเป็น 100% สำหรับ -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>

รหัสนี้ใช้สำหรับเอฟเฟกต์การซูมออกเท่านั้นตั้งค่า div "img-wrap" ตามสไตล์ของคุณและใส่เอฟเฟกต์การซูมออกของผลลัพธ์สไตล์ด้านบนสำหรับเอฟเฟกต์การซูมเข้าคุณต้องเพิ่มค่ามาตราส่วน (เช่นสำหรับการซูม - ในใช้ transform: scale (1.3);


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

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>


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>

เพิ่มคำอธิบายเพื่อลบคำตอบของคุณจากโพสต์คุณภาพต่ำ
Harsha Biyani

-3

เพิ่มไลบรารี jQuery JavaScript ร่วมกับ jquery.zbox.css และ jquery.zbox.js ลงในหน้าเว็บของคุณ

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

เพิ่มกลุ่มภาพขนาดย่อที่มีลิงก์ที่ชี้ไปยังรูปภาพขนาดเต็มลงในเว็บเพจ

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

เรียกใช้ฟังก์ชันบนเอกสารพร้อม แค่นั้นแหละ.

ในแหล่งดูทำ:

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

2
OP ขอวิธีทำใน CSS คำตอบ jQuery ไม่มีประโยชน์ที่นี่
TylerH
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.