响应式图像悬停 - CSS/JQuery

Responsive Image Hover - CSS/JQuery(响应式图像悬停 - CSS/JQuery)

问题描述

我遵循了本教程(http://mattbango.com/notebook/code/hover-zoom-effect-with-jquery-and-css/)并构建了一个我想在我的网站上使用的图像悬停插件.

I followed this tutorial (http://mattbango.com/notebook/code/hover-zoom-effect-with-jquery-and-css/) and built out a image-hover plugin that I'd like to use on my site.

我唯一的问题是我希望它能够响应式地工作，根据我的 960gs 缩放图像.

The only problem I have is that I want it to work responsively, scaling the images according to my 960gs.

这是我到目前为止的小提琴:http://jsfiddle.net/Ak94R/6/

Here's the fiddle I have so far: http://jsfiddle.net/Ak94R/6/

.viewport {
    float: left;
    height: 360px;
    margin: 0 9px 9px 0;
    overflow: hidden;
    position: relative;
    width: 360px;

}

我不想将该图像从 730 像素/730 像素缩小到 360 像素/360 像素，而是将其从 200% 缩小到 100%.我还需要将主剪辑 div (.viewport) 的大小设置为 100%.任何帮助将不胜感激！

Instead of shrinking that image from 730px/730px to 360px/360px, I want to shrink it from 200% to 100%. I also need the main clipping div (.viewport) to be sized at 100%. Any help would be greatly appreciated!

推荐答案

好的，我刚刚花了几分钟时间 纯 CSS 解决方案.做同样的事情，不需要 JS.完全响应，因为它适用于百分比.HTML 如下所示:

Ok, I've just spend a few minutes for a CSS only solution. Does the same thing and no JS required. Fully responsive since it works with percentages. The HTML looks like this:

<div class="viewport_css">
    // I have to use a dummy image to force dimensions
    <img class="dummy" src="ZGF0YTppbWFnZS9naWY7YmFzZTY0LFIwbEdPRGxoQVFBQkFJQUFBQUFBQVAvLy95SDVCQUVBQUFBQUxBQUFBQUFCQUFFQUFBSUJSQUE3" />
    <a class="imgwrapper" href="#">
        <img src="aHR0cDovL3d3dy5sb3JlbXBpeGVsLmNvbS83MzAvNzMwLw==" alt="TW9yZSBJbmZv" />
    </a>
</div>

CSS 部分:

.viewport_css {
    position: relative;
    max-width: 360px;
    height: auto;
    overflow: hidden;
}

// make sure viewport_css always is square shaped
.viewport_css .dummy {
    width: 100%;
    height: auto;
    display: block;
}

.viewport_css a,
.viewport_css a:hover:before,
.viewport_css a:hover:after {
    position: absolute;
    left: 0;
    right: 0;
}
.viewport_css a,
.viewport_css a:hover:after {
    top: 0;
    bottom: 0;
}

.viewport_css a:hover:after {
    content: '';
    display: block;
    z-index: 100;
    background-color: rgba(255, 0, 0, .5);    
}

.viewport_css a:hover:before {
    content: 'View';
    color: #fff;
    top: 50%;
    text-align: center;
    z-index: 200;
    margin-top: -0.5em;
}

.viewport_css .imgwrapper {
    width: 200%;
    height: 200%;
    margin-left: -50%;
    margin-top: -50%;
    transition: all 1s ease-in;  
}

.viewport_css .imgwrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.viewport_css .imgwrapper:hover {
    width: 100%;
    height: 100%;
    margin-left: 0;
    margin-top: 0;
}

这篇关于响应式图像悬停 - CSS/JQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！