Исправить изображения в рамке (CSS)

// EDIT: Обновлено ручка, чтобы все смогли увидеть решение! Click here.Исправить изображения в рамке (CSS)

То, что я хочу, просто (на мой взгляд). Я хочу сделать изображение, которое, когда вы наведите указатель мыши выше, будет увеличено, но не станет больше. Я попытался это в загоне, вот ссылка: Click here

Здесь CSS я использовал для изображения:

.image { 
    width: 100px; 
    transition: all 0.5s; 
} 

.image:hover { 
    width: 120px; 
    transition: 0.5s; 
}

(только сделал «получить больше» анимации, в связи с тем, что я дон «Не знаю, как это сделать», «граница»)

Примером является кнопка, но он все еще немного вверху, я думаю, это та же проблема, что и у меня с изображением.

источник

2016-02-10 Voakie

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

В основном вы положили изображение в DIV и установить изображение, которое вы хотите быть наведены в качестве фонового изображения, а затем увеличить фоновое изображение по наведению

div.horizontalboxes:hover { background-size: 200px 150%; }

просто.

Надеюсь, вы нашли этот ответ полезным, если у вас есть еще вопросы, вы можете оставить комментарий.

источник

2016-02-10 10:34:17 Timble

Действительно, что я хотел! Спасибо за помощь :) – Voakie

Один вопрос, который я только что понял: 'width: 100%;' Как это работает? Он заполняет 100% ширины, доступной в промежутке? – Voakie

То, как в настоящее время работает выше, использует div, который аналогичен, но отличается от диапазона. То, как вы использовали его в своем примере, класс «div.horizontalboxes» не обязательно должен быть в CSS, поскольку он форматирует div, но поскольку div находится в промежутке, он просто подходит для диапазона. Вы можете просто установить, насколько большой вы хотите, чтобы ваш диапазон был, а затем поместите div с изображением, которое вы хотите увеличить, и оно будет соответствовать диапазону, если все будет хорошо. Но чтобы ответить на ваш вопрос, ширина: 100%; заполняет 100% пространства, которое доступно. Посетите эту страницу для получения дополнительной информации http://www.w3schools.com/cssref/pr_dim_width.asp – Timble

проверить эту скрипку..и что вам нужно?

рассмотрим следующий пример

<div class="wrapper"> 
    <a href="javascript:void(0)"> 
    <img src="http://files.braadmartin.com/gretsch-catalina-club-in-natural.jpg" width="250" height="250" /> 
</a> 
<a href="javascript:void(0)"> 
    <img src="http://files.braadmartin.com/gretsch-catalina-club-in-natural.jpg" width="250" height="250" /> 
</a> 
<a href="javascript:void(0)"> 
    <img src="http://files.braadmartin.com/gretsch-catalina-club-in-natural.jpg" width="250" height="250" /> 
</a> 
</div>

и CSS

.wrapper { 
    width: 250px; 
    height: 250px; 
    text-align: center; 
} 

.wrapper img { 
    margin: 4% 0; 
    height: 92%; 
    width: auto; 
} 

.wrapper img:hover { 
    margin: 0; 
    height: 100%; 
}

Вот скрипку

https://jsfiddle.net/65bpLp9y/

источник

2016-02-10 10:12:36

TRY с CSS transform имущества

.image:hover { 
    webkit-transform: scale(1.2); 
    ms-transform: scale(1.2); 
    transform: scale(1.2); 
}

источник

2016-02-10 10:25:31

Исправить изображения в рамке (CSS)

ответ

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