1. ホーム
  2. 質問と答え
  3. Css Image Hover inside Border-Radius

Css Image Hover inside Border-Radius

2013-07-04 14 views
5

私はボーダー半径の内側に100％でぶら下げられるイメージを作っています。
それをホバーすると、イメージの縮尺が変わります。今問題が起こります。私がホバリングすると、ボーダー半径の外側に1秒間イメージが表示されます。Css Image Hover inside Border-Radius

Firefoxで動作しているようです。しかし、クロムとサファリではない。

ライブデモ：
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 */

私は誰かがそれの問題を知って欲しいです。

出典

2013-07-04 Dennis Betman

+0

与える '' '

背景画像のスタイル：URL（placehold.it/250x250：（隠されたオーバーフロー）を持っているコンテナの

）;そしてホバリング時に 'background-size'プロパティを変更してください。 – Albzi

+0

問題は、画像がhtml内になければならないことです。私は誰かのためにこれを作っているから。そして、これが彼がそれを望む方法です。だから彼はイメージを速く変えることができます。 –

+0

彼は、単に画像属性と同じ速さで背景属性を変更することができます。 – Albzi

答えて

2

悲しいことに、それは.Whichがここbug 62363

それを記述しているあなたはtransform: scale(1.45)

回避策とのミックスでoverflow:hiddenを使用するときにそれが発生したChromeバージョンに27.0.1453.116メートルバグですデザイン面でうまくいくのは、div.rounded-smallborder sectionのoverflow:hiddenを削除するだけです。 （問題を回避するオプションのみ）。ここでプレビューを見ることができます。 fiddle example

希望します。

出典

2013-07-04 08:45:18 wandarkaf

+0

いいです。 「これはIE9でのみ期待どおりに機能するようです。」 rofl – abimelex

+0

これは問題を解決していない今、すべての画像が外に出る –

1

はエンジンバグのようです。 画像タグにborder-radiusを追加することで問題は解決します。

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/

出典

2013-07-04 07:34:34 abimelex

+0

ありがとうございます。しかし、私のクロムではまだ動作していません。私はそれを浮かべるとき。ボーダー半径の外側に少なくとも1秒間イメージが見えます。 0.5秒後に消える。 –

+0

私はChromiumでそれをテストし、それは完璧に動作します。どのバージョンを使用していますか？私の仕様：バージョン28.0.1500.52 LinuxMint 14（28.0.1500.52-0ubuntu1.12.10.3）で動作するUbuntu 12.10上に構築 – abimelex

+0

ええ、私はバージョン27.0.1453.116と28を手に入れました。おそらくそれが問題になるでしょう。 –

2

私は規模とオーバーフローとの結果here

それクロムBUGを参照してください、あなたのコードを編集しました。 （あなたのケースではそのdiv.rounded-smallborder section） 追加

position:relative; 
z-index:1;

出典

2016-02-07 09:49:14

関連する問題

 関連する問題