В настоящее время я пытаюсь создать эффект масштабирования при наведении на один из четырех моих изображений. Проблема состоит в том, что большинство примеров обычно используют таблицы или маски для применения какого-либо эффекта.
Вот один пример, который реализует то, что я хотел бы this.
Это - мой код.
<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>
#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);
}
Вот демо fiddle. Я удалил часть элемента, чтобы сделать его более простым, вы всегда можете добавить переполнение, скрытое к .image
, чтобы скрыть переполнение масштабированного изображения.
zoom
свойство работает только в IE
Здесь вы идете.
<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>
#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 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>
.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
Просто:
.grow { transition: all .2s ease-in-out; }
Это позволит элементу присваивать анимацию через css.
.grow:hover { transform: scale(1.1); }
Это заставит его расти!
РЕШЕНИЕ 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"/>
@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>
<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);
}
.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: масштаб (1.3);
-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- конечно, doenst работа для IE 9, я не знаю, откуда у вас эта идея.
Добавьте 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();