Создание эффекта масштабирования изображения при наведении с помощью CSS?

87

В настоящее время я пытаюсь создать эффект масштабирования при наведении курсора на одно из четырех моих изображений. Проблема в том, что в большинстве примеров обычно используются таблицы или блоки масок для применения какого-либо эффекта.

Вот один пример , который реализует то , что я хотел бы это .

Это мой код до сих пор.

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 КорольПолигон
источник

Ответы:

164

Что насчет использования 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 01
1
Как бы вы предотвратили пикселизацию?
Waltari
1
@Waltari размер вашего изображения должен быть на 25% (величина, которую мы увеличиваем) больше, чем область содержимого, поэтому, если эскиз имеет размер 320x240 и мы увеличиваем на 25%, изображение должно быть 400x300.
Митчелл Лэйзелл
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 или их альтернативы.

Андрей Михайлов - лолмаус
источник
19 
.aku { 
    transition: all .2s ease-in-out; 
}

.aku:hover {
    transform: scale(1.1); 
}
Ахил П
источник
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
источник
Я бы не рекомендовал использовать для этого фоновое изображение, вы потеряете все потрясающие SEO, связанные с изображениями, которые поставляются с использованием тега изображения и атрибутов alt.
Митчелл Лэйзелл 01
Я думаю, что это здорово, но вы теряете всю полезность тега 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

рамеш
источник
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-, текущие версии не требуют, но предыдущие сборки требуют.
Митчелл Лэйзелл,
-ms- совершенно не требуется, поскольку он не предлагает решения для любого из браузеров IE, чтобы заставить переход работать. Вы используете префикс, чтобы заставить работать конкретное правило, вы не просто добавляете его для развлечения.
DCdaz 08
-ms- является поставщиком префикс , что они упали на выпуск IE 10, то есть предыдущие версии , такие как IE 9 по- прежнему использовать префикс поставщика, многие люди , к сожалению , использовать IE 9 и по сей день, сейчас , когда речь идет о transitionсобственности IE официально принес transitionв IE 10, поэтому для него это не требуется, однако, если вы хотите быть на 100%, есть версии IE 9, которые нестабильны, которые используют -ms-transition.
Митчелл Лэйзелл
1
Это ложные переходы не работают в IE9 с префиксом поставщика. -ms- - совершенно бессмысленный префикс для переходов.
DCdaz
1
Вы видите -ms- где-нибудь также -o- на Opera Mobile, фактически не заставляет переходы работать, поэтому его бессмысленно и -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" в соответствии с вашими стилями и вставьте указанный выше эффект уменьшения масштаба результатов стиля. Для эффекта увеличения вы должны увеличить значение масштаба (например: для увеличения- в, используйте преобразование: масштаб (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>
Мохидул
источник
Добавьте объяснение, чтобы удалить свой ответ из поста низкого качества.
Харша Бияни
-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 02