Html 使用 CSS 在悬停图像上创建缩放效果？

Question

提问by KingPolygon

I'm currently trying to create a zoom effect on hover over one of my four images. The problem is most examples usually use tables or mask divs to apply some sort of effect.

我目前正在尝试在将鼠标悬停在我的四个图像之一上时创建缩放效果。问题是大多数示例通常使用表格或遮罩 div 来应用某种效果。

Here's one example that implements what I would like this.

这里有一个例子，它实现了什么，我想这个。

Thisis my code so far.

到目前为止，这是我的代码。

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

Answer 1

回答by Mitchell Layzell

What about using CSS3 transformproperty and use scalewhich ill give a zoom like effect, this can be done like so,

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

Here's a demo fiddle. I removed some of the element to make it simpler, you can always add overflow hidden to the .imageto hide the overflow of the scaled image.

这是一个演示小提琴。我删除了一些元素以使其更简单，您可以随时向中添加溢出隐藏.image以隐藏缩放图像的溢出。

zoomproperty only works in IE

zoom属性仅适用于 IE

Answer 2

回答by Andrey Mikhaylov - lolmaus

Here you go.

干得好。

Demo

演示

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

Suggestion

建议

Instead of .fader { inline-block; }consider using some grid system. Based on your technology of preference, you can go Foundation, Susy, Masonryor their alternatives.

而不是.fader { inline-block; }考虑使用一些网格系统。根据您偏好的技术，您可以选择Foundation、Susy、Masonry或它们的替代品。

Answer 3

回答by Akhil P

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

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

Answer 4

回答by jme11

I like using a background image. I find it easier and more flexible:

我喜欢使用背景图像。我发现它更容易和更灵活：

DEMO

演示

CSS:

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:

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

带叠加层的演示 2

Answer 5

回答by ramesh

.item:hover img 
{
 -moz-transform: scale(1.3);
 -webkit-transform: scale(1.3);
 transform: scale(1.3);
}

this way you can zoom any image with simple animation. If you need a complete tutorial here is a official tutorial: http://talkerscode.com/webtricks/image-zoom-in-on-hover-using-css3.php

通过这种方式，您可以使用简单的动画缩放任何图像。如果你需要一个完整的教程，这里有一个官方教程：http: //talkerscode.com/webtricks/image-zoom-in-on-hover-using-css3.php

Answer 6

回答by miksiii

Simply:

简单地：

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

This will allow the element to assign an animation via css.

这将允许元素通过 css 分配动画。

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

This will make it grow!

这将使它成长！

Answer 7

回答by Shameem

SOLUTION 1:You can download zoom-master.
SOLUTION 2:Go to here.
SOLUTION 3:Your own codes

解决方案 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"/>

Answer 8

回答by Sreenath

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

This code is only for zoom-out effect.Set the div "img-wrap" according to your styles and insert the above style results zoom-out effect.For zoom-in effect you must increase the scale value(eg: for zoom-in,use transform: scale(1.3);

此代码仅用于缩小效果。根据您的样式设置div“img-wrap”并插入上述样式结果缩小效果。对于放大效果，您必须增加比例值（例如：for zoom-在，使用变换：比例（1.3）；

Answer 9

回答by ??????? ????????

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

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

Answer 10

回答by Murat Kezli

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

Html 使用 CSS 在悬停图像上创建缩放效果？

提问by KingPolygon

HTML

HTML

CSS

CSS

回答by Mitchell Layzell

回答by Andrey Mikhaylov - lolmaus

Demo

演示

HTML

HTML

CSS

CSS

Suggestion

建议

回答by Akhil P

回答by jme11

DEMO

演示

DEMO 2 with Overlay

带叠加层的演示 2

回答by ramesh

回答by miksiii

回答by Shameem

回答by Sreenath

回答by ??????? ????????

回答by Murat Kezli

相关推荐

最近更新

标签