Tworzysz efekt powiększenia obrazu po najechaniu kursorem przy użyciu CSS?

87

Obecnie próbuję utworzyć efekt powiększenia po najechaniu kursorem na jeden z moich czterech obrazów. Problem polega na tym, że większość przykładów zwykle używa tabel lub elementów div maski, aby nadać jakiś efekt.

Oto jeden z przykładów, który implementuje co chciałbym tego .

To jest mój kod do tej pory.

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
źródło

Odpowiedzi:

164

A co z używaniem CSS3 transformwłasności i użyciem, scalektóre dają efekt zbliżenia, można to zrobić w ten sposób,

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

Oto przykładowe skrzypce . Usunąłem część elementu, aby było to prostsze, zawsze możesz dodać ukryty przepełnienie, .imageaby ukryć przepełnienie skalowanego obrazu.

zoom właściwość działa tylko w IE

Mitchell Layzell
źródło
14
A wygrywając nagrodę „lekcje życia z kodu”, Twój CSS skanduje „Wszystko jest łatwe, wszystko jest łatwe”.
Nerrolken
1
Jak zapobiec pikselizacji?
Waltari
1
@Waltari Twój rozmiar obrazu powinien być o 25% (wielkość, którą powiększamy) większy niż obszar zawartości, więc jeśli miniatura ma wymiary 320x240 i powiększamy o 25%, obraz powinien mieć rozmiar 400x300.
Mitchell Layzell,
25

Proszę bardzo.

Próbny

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

Sugestia

Zamiast .fader { inline-block; }rozważać użycie jakiegoś systemu siatki. W oparciu o preferowaną technologię możesz wybrać Foundation , Susy , Masonry lub ich alternatywy.

Andrey Mikhaylov - lolmaus
źródło
19 
.aku { 
    transition: all .2s ease-in-out; 
}

.aku:hover {
    transform: scale(1.1); 
}
Akhil P.
źródło
16

Lubię używać obrazu tła. Uważam, że jest to łatwiejsze i bardziej elastyczne:

PRÓBNY

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 z nakładką

jme11
źródło
Nie polecałbym używania do tego obrazu tła, stracisz całe niesamowite SEO związane z obrazem, które wiąże się z użyciem tagu obrazu i atrybutów alt.
Mitchell Layzell
Myślę, że to świetnie, ale tracisz całą użyteczność tagu img.
Daniel Naab,
Jeśli obraz nie jest odpowiedni dla SEO, uważam, że to rozwiązanie jest bardziej przejrzyste.
Nemay,
7

Po prostu:

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

Umożliwi to elementowi przypisanie animacji za pośrednictwem css.

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

To sprawi, że będzie rosnąć!

miksiii
źródło
3

ROZWIĄZANIE 1: Możesz pobrać zoom-master .
ROZWIĄZANIE 2: Przejdź tutaj .
ROZWIĄZANIE 3: Twoje własne kody

.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"/>
Rozwiń fragment


Wstyd
źródło
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;

po prostu chcę zanotować powyższe przejścia tylko potrzebuję

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

i -ms- z pewnością wykonują pracę dla IE 9. Nie wiem, skąd wziął się ten pomysł.

DCdaz
źródło
IE10 (pierwsza stabilna wersja IE do obsługi przejścia) nie wymaga przedrostka -ms-, poprzednie wersje niestabilne tak i to samo dotyczy -moz- i -o-, obecne wersje nie wymagają, ale poprzednie wersje tak.
Mitchell Layzell
-ms- nie jest całkowicie wymagane, ponieważ nie oferuje rozwiązania dla żadnej z przeglądarek IE, które umożliwiłoby przejście do pracy. Używasz prefiksu, aby uruchomić określoną regułę, a nie wrzucasz jej tylko dla zabawy.
DCdaz
-ms- jest dostawcą prefiks, które spadły na wydaniu IE 10, co oznacza, jak poprzednie wersje IE 9 nadal używać przedrostka dostawcy, wielu ludzi niestety używać IE 9 do dziś, teraz, gdy chodzi o transitionnieruchomości IE oficjalnie wniesiona transitionw IE 10, więc nie wymaga tego, jednak jeśli chcesz być w 100%, istnieją wersje IE 9, które są niestabilne -ms-transition.
Mitchell Layzell
1
To fałszywe przejścia nie działają w IE9 z prefiksem dostawcy. -ms- to zupełnie bezsensowny przedrostek dla przejść.
DCdaz
1
Czy widzisz -ms- gdziekolwiek również -o- na komórce operowej faktycznie nie powoduje, że przejścia działają, więc jego bezcelowe i -moz- dla szybkich kolejnych wydań 2011 jest bezcelowe, ponieważ dosłownie mówisz o małej garstce użytkowników, którzy będą 100% być programistami i instytucjami, które nie używają sieci jako zwykły użytkownik, ale do celów platformy. Ale nadal główny argument pozostaje -ms- jest całkowicie bezużyteczny i nie jest w najmniejszym stopniu wymagany. nie ma potrzeby -moz- lub -o- I nie ma 100% potrzeby -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>
Rozwiń fragment

Ten kod służy tylko do efektu pomniejszenia. Ustaw element div "img-wrap" zgodnie z własnymi stylami i wstaw powyższy efekt pomniejszenia. Aby uzyskać efekt powiększenia, musisz zwiększyć wartość skali (np. Dla powiększenia- w, użyj transform: scale (1.3);

Sreenath
źródło
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);
}
سیدرسول میرعظیمی
źródło
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>
Rozwiń fragment

Murat Kezli
źródło
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
źródło
Dodaj wyjaśnienie, aby usunąć swoją odpowiedź z postu o niskiej jakości.
Harsha Biyani
-3

Dodaj bibliotekę jQuery JavaScript wraz z jquery.zbox.css i jquery.zbox.js do swojej strony internetowej.

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

Dodaj grupę miniatur z linkami wskazującymi na pełnowymiarowe obrazy na stronie internetowej.

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

Wywołaj funkcję na dokumencie gotowym. Otóż ​​to.

W widoku źródła wykonaj:

$(".zb").zbox();
Giri
źródło
2
OP zapytał o sposób zrobienia tego w CSS. Odpowiedź jQuery nie jest tutaj pomocna.
TylerH