Отзывчивый наведение изображения - CSS/JQuery

Я следовал этому руководству (http://mattbango.com/notebook/code/hover-zoom-effect-with-jquery-and-css/) и построил плагин для наложения изображений, который я хотел бы использовать на своем сайте.Отзывчивый наведение изображения - CSS/JQuery

Единственная проблема, с которой я сталкиваюсь, это то, что я хочу, чтобы она работала оперативно, масштабируя изображения в соответствии с моими 960gs.

Вот скрипка у меня до сих пор: http://jsfiddle.net/Ak94R/6/

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

}

Вместо того, сокращается, что изображение с 730px/730px до 360 пикс/360 пикс, я хочу, чтобы уменьшить его от 200% до 100% , Мне также нужен основной отсекающий div (.viewport) размером 100%. Любая помощь будет принята с благодарностью!

источник

2013-11-19 Eric Wood

Может ли это быть сделано полностью CSS? Не уверен, что вам нужно jQuery вообще, чтобы быть честным. – meavo

'transform: scale (1.5);' и '-webkit-', '-moz-', '-o-' и '-ms-' для других браузеров. –

Проблема в том, что ее все еще нужно обрезать в div. Но мне нужно, чтобы div поддерживал такое же соотношение размеров, что и изображения. Джош Пауэлл - Не могли бы вы предоставить более подробный пример «transform: scale (1.5)»; вы предлагаете? –

Хорошо, я просто потрачу несколько минут на CSS only solution. Делает то же самое и не требует JS. Полностью отзывчив, поскольку он работает с процентами. HTML выглядит следующим образом:

<div class="viewport_css"> 
    // I have to use a dummy image to force dimensions 
    <img class="dummy" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" /> 
    <a class="imgwrapper" href="#"> 
     <img src="http://www.lorempixel.com/730/730/" alt="More Info" /> 
    </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; 
}

источник

2013-11-19 21:23:44 meavo

Это очень близко! Единственная проблема, с которой я все еще сталкиваюсь, - это: .viewport_css {width: 360px; height: 360px;} Как я могу сделать этот процент основанным также? Я пробовал max-width: 360px; ширина: 100%; и он работает, но высота все еще выключена. –

Вам нужен какой-то контейнер для установки размеров. Вы можете сделать что-то с фиктивным изображением, которое имеет видимость: скрытый на нем. В этом случае вам нужна только ширина элемента viewport_css (и максимальная ширина + ширина, как вы упомянули, должна сделать трюк). – meavo

Я не совсем понимаю, что вы имеете в виду с фиктивным изображением. Можете ли вы вообще расшириться? –

я изменил background-size: 70px 80px; с помощью запросов средств массовой информации в каждой точке разрыва - это решило проблему для меня

источник

2014-01-16 18:18:46 Pixelomo

Отзывчивый наведение изображения - CSS/JQuery

ответ

Смежные вопросы