Переполнение не работает с зависанием

Я хочу поместить изображение, заголовок, текст в определенном поле, и это поле будет округлено. Коробка имеет цвет фона с непрозрачностью по цвету RGBA. Когда окно зависло, переполнение не работает. У меня следующий HTML структура:Переполнение не работает с зависанием

<article id="post-181" class="post-181 post type-post status-publish format-standard hentry category-uncategorized"> 
    <header class="entry-header"> 
     <h2 class="entry-title"><a href="#">A PARADISEMATIC COUNTRY</a></h2> 
     <div class="post-info"> 
      <p>Posted by <a href="#">admin</a> on April 25, 2013</p> 
     </div> 
    </header> 
    <div class="entry-content"> 
     <img width="270" height="208" src="http://roi.me/files/google-vs.-bing.jpg" class="alignright wp-post-image" alt="logos mini"> 
    </div><!-- .entry-content --> 
</article>

и КСС:

.post { 
margin-top: 20px; margin-left: 20px; width: 270px; height: 270px; margin-right: 30px; background: rgba(49, 187, 183, 0.5); border-radius: 50%; cursor: pointer; overflow: hidden; position: relative; -webkit-transition: .5s ease background; 
} 

.post .entry-content img { 
position: absolute; top: 0; left: 0; min-height: 270px; min-width: 270px; margin: 0; z-index: -100; border: 1px solid red; 
} 

.post:hover { 
background: rgba(49, 187, 183, 1); 
}

Я уже загружен в jsfiddle:

Demo fiddle

Примечание: я попробовал с светлячок и хром , Firefox показывает хорошо, но хром не может!

Пожалуйста, помогите мне. Заранее спасибо.

источник

2013-05-04 itskawsar

Как вы ожидаете, что сработаете? –

Можете ли вы описать * переполнение не работает * более подробно? – Nelson

Ваш вопрос непонятен. Как я понимаю, когда пользователь будет навис над кругом, вам нужен прозрачный цвет. Если я прав, ваш код в порядке. просто вы должны использовать 0.5 или .5 вместо 1 в значении rgba. –

Взгляните на этот учебник:

HOVER AND CLICK TRIGGER FOR CIRCULAR ELEMENTS WITH JQUERY

Вот DEMO

Однако, вам придется использовать некоторые JQuery, чтобы заставить его работать.

Надеется, что это помогает

EDIT

Если вы не хотите использовать JQuery, то взгляни на этом учебнике:

CIRCLE HOVER EFFECTS WITH CSS TRANSITIONS

ВИДЕТЬ DEMO.

Таким образом, вам не нужны jQuery или JS, просто переходы CSS3.

Теперь я думаю, что это то, что вы хотите.

Сообщите мне, если это сработает.

источник

2013-05-04 13:29:59 Christian

Я могу сделать это с помощью jquery, но я хочу сделать это с помощью эффекта перехода css3. – itskawsar

Взгляните на вторую демоверсию. – Christian

Переполнение не работает с зависанием

ответ

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