使用 CSS 在悬停图像上创建缩放效果? [英] Creating a Zoom Effect on an image on hover using CSS?

问题描述

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

这是一个实现我想要的这个的示例.

这是我目前的代码.

HTML

<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="">

CSS

#menu {最大宽度:1200px；文本对齐:居中；保证金:自动；}#menu img {宽度:250px；高度:375px；填充:0px 5px 0px 5px；溢出:隐藏；}.博客 {高度:375px；-webkit-transition:全 1s 轻松；-moz-transition:全 1s 轻松；-o-transition:全 1s 缓解；-ms-transition:全 1s 缓解；过渡:全 1s 缓解；}.博客:悬停{光标:指针；高度:475px；宽度:350px；}.音乐 {高度:375px；}.projects {高度:375px；}.bio {高度:375px；}

解决方案

如何使用 CSS3 transform 属性和使用 scale 会产生类似缩放的效果，这可以这样做，

HTML

<div class="图像"><img src="http://placehold.it/320x240" alt="一些很棒的文字"/>

CSS

.thumbnail {宽度:320px；高度:240px；}.图片 {宽度:100%；高度:100%；}.image img {-webkit-transition:全 1s 轻松；/* Safari 和 Chrome */-moz-transition:全 1s 轻松；/* 火狐 */-ms-transition:全 1s 缓解；/* IE 9 */-o-transition:全 1s 缓解；/* 歌剧 */过渡:全 1s 缓解；}.image:hover img {-webkit-transform:scale(1.25);/* Safari 和 Chrome */-moz-transform:scale(1.25);/* 火狐 */-ms-transform:scale(1.25);/* IE 9 */-o-transform:scale(1.25);/* 歌剧 */变换:比例(1.25)；}

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

zoom 属性仅适用于 IE

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.

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

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

解决方案

What about using CSS3 transform property and use scale which ill give a zoom like effect, this can be done like so,

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 .image to hide the overflow of the scaled image.

zoom property only works in IE

这篇关于使用 CSS 在悬停图像上创建缩放效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！