円画像に50％ホバーオーバーレイ効果を与える方法

Question

私は、ユーザが自分のディスプレイ画像上を移動すると、オーバーレイが表示されるという機能がウェブサイトにあります。

しかし、残念ながら私はオーバーレイが写真全体を覆い隠さないようにしたいと思います。私はそれを円の半分にしたい。

解決策を探してみましたが、解決策が見つかっていないようです。

私はそれがどのように見えているかのイメージです。事前に

感謝。

あなたがこの効果を達成する方法を教えてくれるなら、本当に感謝します。

Answer 1

トリックは、overflow:hiddenをコンテナ（円）に追加し、オーバーレイを円の高さの半分にすることです。ここでは例のコードは次のとおりです。

#circle{ 
 
    width:200px; 
 
    height:200px; 
 
    border-radius:50%; 
 
    background-color:#0098dd; 
 
    position:relative; 
 
    overflow:hidden; 
 
} 
 

 
#overlay{ 
 
    display:none; 
 
    position:absolute; 
 
    bottom:0; 
 
    text-align:center; 
 
    width:200px; 
 
    height:100px; /* Half of the container */ 
 
    line-height:100px; 
 
    background-color:rgba(255,255,255,0.5); 
 
} 
 
#circle:hover #overlay{ 
 
    display:block; 
 
}

<div id="circle"> 
 
    <div id="overlay"> 
 
    Test 
 
    </div> 
 
</div>

Answer 2

親divがposition:relative;とoverflow:hidden;を持つことになります。オーバーレイのposition:absolute;はtop:50%;（親の下半分のみをカバーする）になります。それが表示されるようにするに

：

まず方法：あなたは第2の方法

display:block;にdisplay:none;へ.overlayと.con:hover .overlayを設定することができます。あなたが top:50%;に top:100%; transition:top 0.5s;と .con:hover .overlayに .overlayを設定することができます。変更を遅くするために transitionが追加されました。

第2の方法を使用する下記のスニペットをご覧ください。また、私はアイコンのための素晴らしいフォントを使用しました。あなたはoverflow: hidden;を使用する必要が

.con{ 
 
    width:150px; 
 
    height:150px; 
 
    border-radius:75px; 
 
    background-image:url("http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"); 
 
    background-size:cover; 
 
    overflow:hidden; 
 
    position:relative; 
 
} 
 
.overlay{ 
 
    position:absolute; 
 
    top:100%; 
 
    left:0; 
 
    padding-top:10px; 
 
    text-align:center; 
 
    width:100%; 
 
    height:100%; 
 
    background-color:rgba(255,255,255,0.5); 
 
    transition:top 0.5s; 
 
} 
 
.con:hover .overlay{ 
 
    top:50%; 
 
} 
 
.overlay a{ 
 
    margin:5px; 
 
    font-size:1.6em; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="con"> 
 
    <div class="overlay"> 
 
    <a><i class="fa fa-briefcase"></i></a> 
 
    <a><i class="fa fa-list"></i></a> 
 
    </div> 
 
</div>

Answer 3

私はあなたがtransitionで好き願っています。このjsfiddleに

https://jsfiddle.net/3jdb1m7e/

を確認してください。

<div class="img-box"> 
    <img src="http://placehold.it/350x350" class="image"> 
    <div class="img-content"> 
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/96-128.png" width="36px" height="36px" /></a> 
    <a href="#"><img src="https://cdn0.iconfinder.com/data/icons/internet-and-web-flat-icons-free/512/Menu_icon-128.png" width="36px" height="36px"/></a> 
    </div> 
</div> 

.img-box { 
position: relative; 
    text-align: center; 
    display: block; 
    border-radius: 105px; 
    overflow: hidden; 
    width: 200px; 
    height: 200px; 
    border: 1px solid #333; 
} 
.img-box .image{ 
     border-radius: 50%; 
    width: 100%; 
} 
.img-content { 
    padding: 40px; 
    background: #fff; 
    position: absolute; 
    bottom: -120px; 
    width: 100%; 
    box-sizing: border-box; 
    transition: all 0.2s ease-in-out; 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
} 
.img-box:hover .img-content{ 
    bottom: 0px; 
    transition: all 0.2s ease-in-out; 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
}