При наведении контента

0

Когда я нависаю над изображением, я устанавливаю его для отображения радиуса границы, потому что у меня есть фоновое изображение, и факт, что вы не можете сделать прозрачный радиус границы, я удалил его, что вызвало крутой, но случайный эффект. Когда вы наводите курсор на изображение, чтобы отобразить радиус и добавленное дополнение, он сдвигает остальную часть страницы вниз.

В любом случае, я могу сохранить эффект на определенной части страницы, чтобы она перемещала текстовые и контентные поля, но не останавливала ее нажатием на всю страницу. Это мой код, но чтобы получить реальный пример, есть ссылка на сайт, спасибо!

.service img#dev:hover{
border: 3px solid #76c2af;
border: 3px solid #76c2af;
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
border-radius: 80px;
padding:10px;
transition: all 0.5s ease-in-out 0s;
}

<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 service" style="text-align:center;">
    <img id="dev" src="assets/imgs/dev.png">
    <div class="serviceDescription">
        <h3 class="service-title">Hand Crafted</h3>
        <p class="service-description">
                    All of my projects are hand crafted and utilize the latest in web technology. My work boasts a clean & compliant markup and you are rewarded with unquestionable level of perfection.
        </p>
    </div>
</div>

Просмотр в прямом эфире

  • 0
    Вы пытались удалить padding: 10px из вашего: hover css?
  • 0
    Привет, да, они уменьшат это, но я все еще хочу, чтобы это толкнуло окно контента, а не остальную часть страницы. Я не знал, было ли какое-то переполнение или что-то, что я мог бы добавить, чтобы остановить это, толкая контент ниже портфеля немного вниз. Спасибо!
Показать ещё 2 комментария
Теги:

1 ответ

1
Лучший ответ

например

.service img{
  border: 3px solid transparent;
  -webkit-background-clip: padding-box; /* for Safari */
  background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
  border-radius: 80px;
  padding:10px;
  transition: all 0.5s ease-in-out 0s;
}

И отдых в порядке :)

Поделиться
  • 0
    Привет, я все еще хотел, чтобы оно давило на контент, но я сделаю несколько jQuery, чтобы при наведении курсора на изображение оно перемещалось вниз. Спасибо за вашу помощь! Знаете ли вы, какие браузеры поддерживают «прозрачную» границу
  • 0
    Примечание. Internet Explorer 6 (и более ранние версии) не поддерживает значение свойства «прозрачный». Поэтому я думаю, что вы в безопасности. Я не очень понимаю вторую часть. Что ты имеешь в виду под нажатием контента?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню