Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Css Image Hover inside Border-Radius

Tags:

css

hover

google-chrome

safari

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.

like image 782
Dennis Betman Avatar asked Jul 04 '13 07:07

Dennis Betman

3 Answers

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.

like image 171
wandarkaf Avatar answered Nov 06 '22 01:11

wandarkaf

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;
like image 40
J.Tural Avatar answered Nov 05 '22 23:11

J.Tural

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/

like image 1
Karl Adler Avatar answered Nov 06 '22 01:11

Karl Adler
Sign in to Comment

Related questions

How do I get this fontpicker to display properly inside a bootstrap modal w/ a tab
Internet Explorer swallows events
Selecting Every Second Level In CSS
tablesorter doesn't show up and down arrows
Setting border of containing div changes its size dramatically
User text selection in floating element in Chrome (webkit) selects more text [closed]
Fixed column header width does not match body column widths
Trying to fit a html content (googlemap) between a header and a footer - CSS - HTML
Integrating Wrap Bootstrap Themes with Ruby on Rails
CSS3 Transition (cubic-bezier) is not working in Firefox
How can you create a vertical navbar with drop down menus?
Keeping a div half way across the screen no matter what resolution you are on [duplicate]
CSS3 transformed element not visible in firefox
Aligning a child div centered/bottom in parent
flexbox with a table child
Bootstrap - Disable responsiveness on certain pages
How to apply linear gradient for IE8
conditional CSS based upon div not screen
How to set Qt tooltip width
conditionally load images for responsive designs

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!