如何形成懸停

-4

.images { 
 
\t width: 125px; 
 
\t border: 2px solid #FFF; 
 
\t border-radius: 100px; 
 
\t display: inline-block; 
 
} 
 

 
.images:hover { 
 
\t background: transparent; 
 
\t margin-top:4px; 
 
\t color: transparent !important; 
 
\t border:1px solid #999; 
 
\t 
 
\t /*{Shadow}*/ 
 
\t box-shadow:inset 0 0 5px 0 #333; 
 
\t -moz-box-shadow:inset 0 0 5px 0 #333; 
 
\t -webkit-box-shadow:inset 0 1px 2px 0 #333, 0 1px 1px 0 #fff; 
 

 
}

<img src="pic_mountain.jpg" class="images" alt="Save icon"/>

我想在我的上懸停圓形圖像周圍環圈環。我不想讓我的圖像邊框。我想要一點離開形象的戒指。我如何做到這一點與CSS？

來源

2016-07-04 user5397448

哪裏是你的代碼？ – Xufox

添加一些代碼，爲您的目的更多的解釋，一個小想法等..爲了得到真正的答案 –

[可能有兩個邊框的圓]（http://stackoverflow.com/questions/20305594/circle- with-two-borders） – Xufox

封裝你的照片在一個更大的DIV，把邊框上，與border-radius:50%;

來源

2016-07-04 12:42:36 Ephi

body{ 
 
    padding: 50px; 
 
    background: #fff; 
 
} 
 
div{ 
 
    position: relative; 
 
    width: 150px; 
 
    height: 150px; 
 
    background: #004080; 
 
    border-radius: 50%; 
 
    transition: 0.3s; 
 
} 
 
div:before{ 
 
    content: ''; 
 
    position: absolute; top: 5px; left: 50%; 
 
    margin-left: -60px; 
 
    width: 120px; 
 
    height: 80px; 
 
    border-radius: 100% 100% 70% 70%; 
 
    background: #b5cacf; /* Old browsers */ 
 
background: -moz-linear-gradient(top, #b5cacf 0%, #5c86ac 50%, #004080 100%); /* FF3.6-15 */ 
 
background: -webkit-linear-gradient(top, #b5cacf 0%,#5c86ac 50%,#004080 100%); /* Chrome10-25,Safari5.1-6 */ 
 
background: linear-gradient(to bottom, #b5cacf 0%,#5c86ac 50%,#004080 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b5cacf', endColorstr='#004080',GradientType=0); 
 
} 
 
div:hover{ 
 
    box-shadow: 0 0 0 5px #fff, 0 0 0 7px #0A5ACB; 
 
}

<div></div>

來源

2016-07-04 12:56:48 Dmitriy

謝謝..但如何使內部空間透明。當我將box shadow 5px #fff更改爲透明。它不是apperaing – user5397448

如何形成懸停

回答

相關問題