반응형
CSS를 사용하여 마우스 오버시 이미지에 확대 / 축소 효과 만들기?
현재 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;
}
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에서만 작동합니다.
여기 있습니다.
데모
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 또는 그 대안으로 이동할 수 있습니다 .
.aku {
transition: all .2s ease-in-out;
}
.aku:hover {
transform: scale(1.1);
}
나는 배경 이미지를 사용하는 것을 좋아합니다. 더 쉽고 유연합니다.
데모
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
간단히:
.grow { transition: all .2s ease-in-out; }
이렇게하면 요소가 CSS를 통해 애니메이션을 할당 할 수 있습니다.
.grow:hover { transform: scale(1.1); }
이것은 그것이 성장할 것입니다!
.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
솔루션 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"/> -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에서 작동합니다. 어디서 그 아이디어를 얻었는지 모르겠습니다.
.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);
<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);
}
@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><!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>
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();
참고 URL : https://stackoverflow.com/questions/15757036/creating-a-zoom-effect-on-an-image-on-hover-using-css
반응형
'program story' 카테고리의 다른 글
| Microsoft Edge의 전화 번호 스타일 제거 (0) | 2020.09.13 |
|---|---|
| 여러 JavaScript 개체의 속성을 연결하는 방법 (0) | 2020.09.13 |
| SQL Server 연결된 서버 예제 쿼리 (0) | 2020.09.13 |
| Git에서 실행 된 명령 기록 또는 로그 (0) | 2020.09.13 |
| apt-get : AWS EC2에서 찾을 수없는 명령을 수정하는 방법은 무엇입니까? (0) | 2020.09.13 |