CSS를 사용하여 마우스 오버시 이미지에 확대 / 축소 효과 만들기?

87

현재 4 개의 이미지 중 하나를 가리키면 확대 / 축소 효과를 만들려고합니다. 문제는 대부분의 예가 일반적으로 일종의 효과를 적용하기 위해 테이블 ​​또는 마스크 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;
}
html  class  css 
— KingPolygon
소스

답변:

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는 "모든 것이 용이하고 모든 것이 용이합니다"라고 외칩니다.
— Nerrolken 2014
1
픽셀 화를 어떻게 방지 하시겠습니까?
— Waltari
1
@Waltari 이미지 크기는 콘텐츠 영역보다 25 % (확대되는 양) 더 커야합니다. 따라서 미리보기 이미지가 320x240이고 25 % 확대하면 이미지는 400x300이어야합니다.
— 미첼 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 또는 그 대안으로 이동할 수 있습니다 .

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

.aku:hover {
    transform: scale(1.1); 
}
— Akhil P
소스
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>

오버레이가있는 데모 2

— jme11
소스
나는 이것을 위해 배경 이미지를 사용하지 않는 것이 좋습니다. 이미지 태그와 alt 속성을 사용하여 제공되는 모든 놀라운 이미지 관련 SEO를 잃게 될 것입니다.
— Mitchell Layzell 2014 년
나는 이것이 훌륭하다고 생각하지만 img 태그의 모든 유틸리티를 잃어버린다.
— 다니엘 NAAB
이미지가 SEO와 관련이없는 경우이 솔루션이 더 깔끔하다는 것을 알았습니다.
— NLemay
7

간단히:

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

이렇게하면 요소가 CSS를 통해 애니메이션을 할당 할 수 있습니다.

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

이것은 그것이 성장할 것입니다!

— miksiii
소스
3

솔루션 1 : zoom-master를 다운로드 할 수 있습니다 .
해결 방법 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에서 작동합니다. 어디서 그 아이디어를 얻었는지 모르겠습니다.

— DCdaz
소스
IE10 (전환을 지원하는 최초의 안정적인 IE 버전)은 -ms- 접두사를 필요로하지 않으며, 이전의 불안정한 빌드는 -moz- 및 -o-에도 동일하게 적용됩니다. 현재 버전은 필요하지 않지만 이전 빌드는 필요합니다.
— Mitchell Layzell 2015 년
-ms-는 IE 브라우저가 작동하도록 전환 할 수있는 솔루션을 제공하지 않으므로 완전히 필요하지 않습니다. 접두사를 사용하여 특정 규칙을 적용하면 재미로만 던지지 않습니다.
— DCdaz
-ms-는 IE 10 릴리스에서 떨어 뜨린 공급 업체 접두사입니다. 즉, IE 9와 같은 이전 버전은 여전히 ​​공급 업체 접두사를 사용하고 있습니다. 많은 사람들이 현재까지도 IE 9를 사용하고 transition있습니다 transition. IE 10에서는 필요하지 않지만 100 %가되고 싶다면 .NET을 사용하는 불안정한 IE 9 버전이 있습니다 -ms-transition.
— Mitchell Layzell 2015 년
1
즉, 공급 업체 접두사가있는 IE9에서는 잘못된 전환이 작동하지 않습니다. -ms-는 전환을위한 완전히 무의미한 접두사입니다.
— DCdaz 2015 년
1
-ms- 어디에서나 -o- 오페라 모바일에서 실제로 전환이 작동하지 않으므로 빠른 연속 2011 릴리스에 대한 무의미하고 -moz-는 말 그대로 소수의 사용자에 대해 이야기하고 있기 때문에 무의미합니다. 100 % 일반 사용자가 아닌 플랫폼 목적으로 웹을 사용하는 개발자 및 기관이어야합니다. 그러나 여전히 주요 주장은 -ms-는 완전히 쓸모없고 조금도 필요하지 않습니다. -moz- 또는 -O-이 필요하지 않습니다 그리고 -ms- 필요는 100 %에게이 없습니다
— 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"을 설정하고 위의 스타일 결과 축소 효과를 삽입합니다. 확대 효과의 경우 배율 값을 늘려야합니다 (예 : 확대 / 축소- in, use transform : scale (1.3);

— Sreenath
소스
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.zbox.css 및 jquery.zbox.js와 함께 jQuery JavaScript 라이브러리를 웹 페이지에 추가합니다.

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