3

I had a problem with border-radius in webkit browsers and found the solution at the following URL: How to make CSS3 rounded corners hide overflow in Chrome/Opera

but iam using a another element with position: absolute; inside this now I need to make the caption with rounded border too, but do not know how

note: i can't use another border-radius in caption, because this will have an animation

see the code with:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Problem</title>  
    <style type="text/css"> 
    img {
        border: 0;  
    }

    a {
        text-decoration: none;  
    }

    .wrap-events {
        float: left;
        position: relative;
        width: 500px;
        height: 250px;
    }

    .events {
        overflow: hidden;

        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
    }

    .caption {
        position: absolute;
        width: 100%;
        bottom: 0;
        color: #FFFFFF;
        background-color: #151515;
        font: 12px "Arial", Helvetica, sans-serif;

        opacity: 0.6;

        border-radius: 0 0 50px 50px; /* add border-radius to caption */
    }

    .caption p {
        padding: 10px;
    }
    </style>
</head>
<body>
    <div class="wrap-events">
        <div class="events">
            <a href="#">
                <img src="http://www.cg-auto.com.br/forum/imagens/imagens_news/26c4dc4359edcfd4c6871ee1fa958539.jpg" alt="image">
            </a>
            <div class="caption">
                <p>This is a caption</p>
            </div>
        </div>
    </div>
    <button id="slide">Slide It!</button>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $('#slide').click(function(){
            $('.caption').hide().slideDown(2000);
        });
    </script>
</body>
</html>

cheers

Community
  • 1
  • 1
JaNightmare
  • 33
  • 1
  • 4
  • 1
    May I offer you a [JS Fiddle demo](http://jsfiddle.net/davidThomas/B6FPE/)? It makes it easier for us to help you, if we can see what you're trying to do. – David Thomas Mar 24 '12 at 23:13
  • Seems Ok to me [this](http://jsfiddle.net/Starx/SBBLT/) – Starx Mar 24 '12 at 23:16
  • thanks @DavidThomas... @Starx the problem with caption with `border-radius` can be seen in the half of the animation, the caption is very out of the image cheers – JaNightmare Mar 24 '12 at 23:18
  • [here an example](http://jsfiddle.net/mCLaT/1/) of what I would like, but only work in IE9 and FF... chrome, safari, opera without rounded border. – JaNightmare Mar 24 '12 at 23:42

1 Answers1

-1

That is a problem for now I think. May I suggest you use fadeIn() Instead. See a demo

Starx
  • 77,474
  • 47
  • 185
  • 261