6

I'm making an image that can be hovered inside a border-radius with 100%.
And when you hover it the image will scale. Now comes the problem. When I hover it, you will see the image for 1 sec outside the border-radius.

It seems to be working in Firefox. But not in chrome and Safari.

Live Demo:
http://jewelbeast.com/something/imghover/rounded.html

HTML:

    <div class="rounded-smallborder">
        <section class="img-scale img-opacity" style="width: 250px; height: 250px;">
            <img src="http://placehold.it/250x250" />
            <div class="text">
                <span>
                    <h1>This is a title</h1>
                    <ul>
                        <li>List number 1</li>
                        <li>List number 2</li>
                        <li>List number 3</li>
                    </ul>
                </span>
            </div>
        </section>
    </div>

CSS:

div.rounded-smallborder{
    margin-top: 22px;
    margin-bottom: 22px;
    height: 362px;
    width: 228px;
    float: left;
    display: block;
    margin-left: 10px;
}

div.rounded-smallborder section{
    position: relative;
    width: 217px;
    height: 217px;
    -webkit-border-radius: 100%;  
  -moz-border-radius: 100%;  
  -ms-border-radius: 100%;  
  -o-border-radius: 100%;  
  border-radius: 100%;  
    border: 5px solid white;

    -webkit-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1);
    -moz-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1);
    -ms-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1);
    -o-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1);
    box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1);

    float:left;
    text-align: center;

    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

    overflow: hidden;
    background: #dfdfdf;
}

div.rounded-smallborder section img{
    position: absolute;

    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

    left: 0%;
}


div.rounded-smallborder section.img-slideleft:hover img{
    margin-left: -35px;
}

div.rounded-smallborder section.img-zoomin:hover img{
    width: 550px;
}

div.rounded-smallborder section.img-slideup:hover img{
    margin-top: -35px;
}

div.rounded-smallborder section.img-opacity:hover img{
    opacity: 0.2;
}

div.rounded-smallborder section.img-diagonal:hover img{
    margin-top: -35px;
    margin-left: -35px;
}

div.rounded-smallborder section.img-rotation:hover img{
    -webkit-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    transform:rotate(360deg);
}


div.rounded-smallborder section.img-scale:hover img{
    -webkit-transform:scale(1.45);
    -o-transform:scale(1.45);
    -moz-transform:scale(1.45);
    -ms-transform:scale(1.45);
    transform:scale(1.45);
}

/* Text effecten */
div.rounded-smallborder section.txt-slideinleft .text{
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

    margin-left:-250px;
}

div.rounded-smallborder section.txt-slideinleft:hover .text{
    margin-left: 0px;
}

div.rounded-smallborder section.txt-slideinleftTitle .text span h1{
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

    margin-left:-250px;
}

div.rounded-smallborder section.txt-slideinleftTitle:hover .text span h1{
    margin-left: 0px;
}



div.rounded-smallborder section.txt-slideinright .text{
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

    margin-left:250px;
}

div.rounded-smallborder section.txt-slideinright:hover .text{
    margin-left: 0px;
}

div.rounded-smallborder section.txt-slideinrightTitle .text span h1{
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

    margin-left:250px;
}

div.rounded-smallborder section.txt-slideinrightTitle:hover .text span h1{
    margin-left: 0px;
}

div.rounded-smallborder section.txt-slideinleftRightAll .text span h1{
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

    margin-left:-250px;
}

div.rounded-smallborder section.txt-slideinleftRightAll:hover .text span h1{
    margin-left: 0px;
}

div.rounded-smallborder section.txt-slideinleftRightAll .text span p{
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

    margin-left:250px;
}

div.rounded-smallborder section.txt-slideinleftRightAll:hover .text span p{
    margin-left: 0px;
}

div.rounded-smallborder section.txt-slideinleftRightAll .text span a{
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

}

div.rounded-smallborder section.txt-slideinleftRightAll:hover .text span a{
}


div.rounded-smallborder section.txt-opacityAll .text span h1{
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -ms-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;

    transition-delay: 0s;
    -webkit-transition-delay: 0s; /* Safari */
    -moz-transition-delay: 0s; /* Safari */
    -ms-transition-delay: 0s; /* Safari */
    -o-transition-delay: 0s; /* Safari */

    opacity: 0;
}

div.rounded-smallborder section.txt-opacityAll:hover .text span h1{
    opacity: 1;
}

div.rounded-smallborder section.txt-opacityAll .text span p{
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -ms-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;

    transition-delay: .5s;
    -webkit-transition-delay: .5s; /* Safari */
    -moz-transition-delay: .5s; /* Safari */
    -ms-transition-delay: .5s; /* Safari */
    -o-transition-delay: .5s; /* Safari */

    opacity: 0;
}

div.rounded-smallborder section.txt-opacityAll:hover .text span p{
    opacity: 1;
}

div.rounded-smallborder section.txt-opacityAll .text span a{
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -ms-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;

    transition-delay: 1s;
    -webkit-transition-delay: 1s; /* Safari */
    -moz-transition-delay: 1s; /* Safari */
    -ms-transition-delay: 1s; /* Safari */
    -o-transition-delay: 1s; /* Safari */

    opacity: 0;
}

div.rounded-smallborder section.txt-opacityAll:hover .text span a{
    opacity: 1;
}


div.rounded-smallborder section.txt-slideintop .text{
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

    margin-top:-450px;
    margin-left: 0px;
}

div.rounded-smallborder section.txt-slideintop:hover .text{
    margin-top: 0px;
}

div.rounded-smallborder section.txt-slideinbottom .text{
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

    margin-top:450px;
    margin-left: 0px;
}

div.rounded-smallborder section.txt-slideinbottom:hover .text{
    margin-top: 0px;
}

div.rounded-smallborder section.txt-longopacity .text{
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;

    margin-left: -250px;

    opacity: 0;
}

div.rounded-smallborder section.txt-longopacity:hover .text{
    margin-left: 0px;

    opacity: 1;
}

div.rounded-smallborder section.txt-slideinleftRotation .text{
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

    margin-left: -250px;

}

div.rounded-smallborder section.txt-slideinleftRotation:hover .text{
    margin-left: 0px;

    -webkit-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    transform:rotate(360deg);
}

div.rounded-smallborder section.txt-slideinrightRotation .text{
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

    margin-left:250px;

}

div.rounded-smallborder section.txt-slideinrightRotation:hover .text{
    margin-left: 0px;

    -webkit-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    transform:rotate(360deg);
}



div.rounded-smallborder section.txt-slideintopRotation .text{
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

    margin-top: -450px;
    margin-left: 0px;

}

div.rounded-smallborder section.txt-slideintopRotation:hover .text{
    margin-top: 0px;

    -webkit-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    transform:rotate(360deg);
}


div.rounded-smallborder section.txt-slideinbottomRotation .text{
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

    margin-top: 450px;
    margin-left: 0px;

}

div.rounded-smallborder section.txt-slideinbottomRotation:hover .text{
    margin-top: 0px;

    -webkit-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    transform:rotate(360deg);
}

/* End of text effecten */


div.rounded-smallborder section .text{
    position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width:100%;
  display:table;
  margin-left: -250px;
}

div.rounded-smallborder section:hover .text{
    margin-left: 0px;
}

div.rounded-smallborder section span{
    width: 200px;
    display: table-cell;
  vertical-align: middle;
  padding: 20px;
  color: black;

  opacity: 0;

  text-shadow: 1px 1px 0px rgba(255,255,255,0.3);
}

div.rounded-smallborder section:hover span{
    opacity: 1;
}

div.rounded-smallborder section:hover img{
    opacity: 0.5;
}

div.rounded-smallborder section span h1{
    width: 100%;
    text-align: center;

    font-size: 18px;
    font-family: Verdana, sans-serif;
    font-weight: bold;
    line-height: 25px;
    margin-bottom: 3px;
}

div.rounded-smallborder section span p{
    width: 100%;
    text-align: center;

    font-size: 10px;
    font-family: Verdana, sans-serif;
    font-weight: bold;
    margin-bottom: 10px;
}

div.rounded-smallborder section span ul{
    list-style-position:inside;
}

div.rounded-smallborder section span ul li{
    width: 100%;
    text-align: center;

    font-size: 10px;
    font-family: Verdana, sans-serif;
    font-weight: bold;
    line-height: 15px;
}

div.rounded-smallborder section span a.button{
    display: table;
    margin: 0px auto;

    text-align: center;
    color: white;
    text-shadow: none !important;
    text-decoration: none;

    font-size: 10px;
    font-family: Verdana, sans-serif;
    font-weight: bold;

    padding: 9px 10px 11px 10px;
    border: 1px solid #000000;

    background: #494949; /* Old browsers */
    background: -moz-linear-gradient(top, #494949 1%, #3a3a3a 94%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#494949), color-stop(94%,#3a3a3a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #494949 1%,#3a3a3a 94%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #494949 1%,#3a3a3a 94%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #494949 1%,#3a3a3a 94%); /* IE10+ */
    background: linear-gradient(to bottom, #494949 1%,#3a3a3a 94%); /* W3C */
}

div.rounded-smallborder section span a.entire{
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
}

/* END */

I hope someone know the problem of it.

3
  • Give <section> a style of background-image:url(placehold.it/250x250); and then on hover change the background-size property.
    – Albzi
    Jul 4, 2013 at 7:38
  • The problem is, the image have to be inside the html. Because i'm making this for someone. And this is the way he want it. So he can change the image fast. Jul 4, 2013 at 7:43
  • He can just change the background attribute just as fast as the image attribute.
    – Albzi
    Jul 4, 2013 at 7:46

3 Answers 3

2

Sadly it's a bug on chrome Version 27.0.1453.116 m .Which is describe it here bug 62363

It occurs when you use overflow:hidden in mix with transform: scale(1.45)

A workaround, that works well in the design aspect is just remove the overflow:hidden on the div.rounded-smallborder section . (just an option to workaround the issue). You can take a look at the preview here. fiddle example

Hope it helps.

1
  • this dose not solve the problem now all image go outside
    – J.Tural
    Feb 7, 2016 at 9:48
2

I edited your code see results here

it chrome BUG with scale and overflow .

for the container that have the ( overflow:hidden ) add ( in your case its the div.rounded-smallborder section )

position:relative;
z-index:1;
1

seems to be an engine bug. Adding border-radius also to the image tag should solve the problem.

 div.rounded-smallborder section img{
   position: absolute;
   border-radius: 100%;        /*added line*/
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -ms-transition: all .3s;
   -o-transition: all .3s;
   transition: all .3s;
   left: 0%;
 }

http://jsfiddle.net/5RA4m/

6
  • Thanks. But in my Chrome its still not working. When i hover it. I see the image for at least 1 sec out side the border-radius. And is disappear after 0.5 sec. Jul 4, 2013 at 7:40
  • I tested it in Chromium and it works perfect. Which Version do you use? My Specs: Version 28.0.1500.52 Built on Ubuntu 12.10, running on LinuxMint 14 (28.0.1500.52-0ubuntu1.12.10.3)
    – Karl Adler
    Jul 4, 2013 at 7:43
  • Yeah i got Version 27.0.1453.116 and you 28. Maybe that will be the problem than. Jul 4, 2013 at 7:45
  • I use Chrome Canary and I still have the image over the circle on hover.
    – Albzi
    Jul 4, 2013 at 7:50
  • it's still buggy for me, using the Version 27.0.1453.116 m of chrome
    – wandarkaf
    Jul 4, 2013 at 7:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.