Увеличение изображения CSS при наведении курсора
Мне удалось создать эффект увеличения изображения при наведении курсора. Однако проблема в том, что изображение перемещается в правый нижний угол при наведении указателя мыши. Я хочу увеличить до центра-центра. Как это возможно?
Я попытался использовать transform scale(1.1);, и он работает для увеличения до центра-центра, но тогда эффект перехода не работает. Таким образом, изображение просто перескакивает на 1.1 при наведении курсора мыши, и эффект больше не гладкий.
P.S. Я использую Joomla и SP Page Builder
.sppb-col-md-3
{
overflow: hidden;
}
.hover03
{
height: 100%;
width: 100%;
transition: all 1s ease;
}
.hover03:hover
{
width: 110%;
height: 110%;
}
Можете ли вы показать пример, когда шкала не работает, потому что она должна работать
Снова используйте преобразование, но добавьте transform-origin:center
Предложение Дэвида сработало! Спасибо!
В течение многих-многих лет ни одному браузеру не требовались префиксы для перехода.
Значение transform-origin по умолчанию находится в центре, поэтому не уверен, как предложение @David заставляет это работать ... попробуйте поделиться полным кодом
@mrwad, потому что вы не приложили никаких усилий, пытаясь решить проблему самостоятельно.
Ответы 1
Вы должны применить переход к элементу, тегу img в вашем случае и эффекту (например, transform: scale;) на: hover. Надеюсь, это поможет!
Взгляните на этот рабочий пример:
https://codepen.io/Angel-SG/pen/JwJzxg
.img-outer {
overflow: hidden;
max-width: 300px;
max-height: 300px;
}
.img-inner {
position: relative;
}
img {
transition: 0.5s ease;
}
img:hover {
transform: scale(1.2);
} <div class = "img-outer">
<div class = "img-inner">
<img src = "https://via.placeholder.com/300C/O
https://placeholder.com/" alt = "image">
</div>
</div>Как только ссылки станут мертвыми, ваша ссылка станет бесполезной. Разместите здесь свой пример разметки и не используйте сторонний сайт.
Что ж, технически образец кода в идеале должен быть добавлен как фрагмент в сообщение.