css - Overflow is not working on hover -

-

i want place image, title, text in particular box , box rounded. box has background color opacity rgba color. when box hovered overflow not working. have following html structure:

<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 <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>

and css :

.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); }

i uploaded jsfiddle:

demo fiddle

note: have tried firefox , chrome. firefox shows chrome cannot!

please me. in advance.

take on tutorial:

hover , click trigger circular elements jquery

here demo

however, you'll have use jquery make work.

hope helps

edit

if don't want use jquery, take on tutorial:

circle hover effects css transitions

see demo.

that way don't need jquery or js, css3 transitions.

now think want.

let me know if worked.


Comments

Post a Comment

Popular posts from this blog

Perl - how to grep a block of text from a file -

-
it can in xml or text format. how in general grep block of text in perl? <track type="ws"> <range> <rangestart>0</rangestart> <rangeend>146.912</rangeend> <locationindex>0</locationindex> <propertyindex>0</propertyindex> </range> </track> <track type="ps" id="1"> <range> <rangestart>0</rangestart> <rangeend>146.912</rangeend> <locationindex>1</locationindex> <propertyindex>1</propertyindex> </range> </track> i want grep type="ps" , till </range> . one solution open file, read line line , match block. open(fh, "file.txt"); foreach $line (<fh>) { if ($line =~ m/type="cc"(.*?)<\/range>/) { print $1; } } but there more optimal solution without reading file line l
Read more

delphi - How to remove all the grips on a coolbar if I have several coolbands? -

-
Image
if set mycoolbar.fixedorder true,only grip on first band hidden. well,if use delphi 7 create vcl forms application,then put coolbar on , create 3 coolbans hold other controls,only grip , top coolbands can hidden setting mycoolbar.fixedorder:=true. i've uploaded picture make things clear. you got fixedorder property wrong. fixed property not allow bands rearranged if set true . setting property of coolbar true keep user changing bands order @ runtime, user can still move , resize bands. can give advice can do, actual solution problem, well, have wait answer. my advice use 3 coolbars in row , setting "fixedorder" property true , bandborderstyle bsnone . way grip hidden on of them. about property, it's not bug of ide, actual preference of property.
Read more

javascript - Animating array of divs; only the final element is modified -

-
this baffling me @ moment. i'm experienced programmer looking throw bit of surprise fiancee on countdown page our wedding. desired effect simulated confetti falling behind main page. setup follows: i have array of divs in javascript. each div absolutely positioned on page. have interval set updates every 50 or milliseconds. on each tick, run loop on array of divs, , calculations , update positions. problem problem having, however, though can see divs created, stored array, , modified (in case, each has slight randomized rotation) during initialization phase, once tick update position starts, div stored in whatever last slot of array gets position updated. tried hard-coding each div index testing purposes, strictly last element update position. upon printing current "left" , "top" style values each div before , after calculations shows value has been changed, no visible change noticeable. here's basic code: javascript var container;
Read more