Bild mit Opazitätsänderung und Kreisüberlagerung?

Ich fühle mich wie es ist nicht so schwer, aber ich kann nicht scheinen, es herauszufinden. Ich habe hauptsächlich Probleme mit der Kreisüberlagerung, wenn ich über dem Bild schwebe. Dies ist, was ich mitBild mit Opazitätsänderung und Kreisüberlagerung?

habe kommen

.box { 
color: #212121; 
padding: 0; 
float: left; 
margin: 5px; 
width: 225px; 
height: 85px; 
background: #ffffff; 
} 

.box img{ 
text-align: center; 
width: 75px; 
height: 75px; 
-moz-transition-duration:0.6s; 
-webkit-transition-duration:0.6s; 
-o-transition-duration:0.6s; 
} 

.box img:hover .circle{ 
opacity:0.5; 
-moz-transition-duration:0.6s; 
-webkit-transition-duration:0.6s; 
-o-transition-duration:0.6s; 
} 

.circle{ 
position: absolute;  
text-align:center; 
width:30px; 
height:30px; 
background-color:#fff; 
font-family: calibri; 
font-size:18px; 
line-height:28px; 
padding:15px; 
margin: -70px 8px; 
opacity:0; 
-moz-border-radius: 50px; 
-webkit-border-radius: 50px; 
-moz-transition-duration:0.6s; 
-webkit-transition-duration:0.6s; 
-o-transition-duration:0.6s; 
}

Quelle

2016-03-31 Anonymous

Können Sie den HTML in Frage? Und vielleicht sogar eine Geige, um Ihren Code in Aktion zu zeigen. – mmgross

Die '-moz-' Präfixe werden nicht mehr benötigt, gelöscht die aus Ihrem Code. Nicht sicher über das '-o-' und '-webkit-'. – Martijn

@Martijn Laut [caniuse] (http://caniuse.com/#feat=css-transitions), wenn es nicht für Android wäre, könntest du '-webkit-' und '-o-' anscheinend fallen lassen nie eine große Sache zu beginnen (nur für eine Version). Wie auch immer, ich denke, den Code einer Frage zu bearbeiten, weil etwas nicht mehr benötigt wird, ist eine schreckliche Idee! Möglicherweise verstecken Sie versehentlich, was das Problem verursacht. Sicher, das ist hier nicht der Fall, aber Sie ändern die Frage immer noch effektiv. Und nicht zu vergessen: Das Hinzufügen von Präfix-Versionen tut nicht weh und Sie können zusätzliche 0,1% aller Benutzer unterstützen. – mmgross

Ihr Hauptproblem ist, dass Sie die img erwarten .circle als Kind zu haben, was nicht möglich ist, wie img ein selbst ist enthalten Element.

Soweit Ihre HTML korrekt ist:

<div class="box"> 
    <img src="self.jpg" alt="" /> 
    <div class="circle"></div> 
</div>

sollte Ihre CSS wie weiter unten noch mehr sein. Sie sollten :hover Deklaration auf .box verschieben, damit es für Kreis verfügbar wird (der jetzt ein direktes Kind ist). Andere Styling-Probleme sind nicht wirklich verwandt und sind wichtig, was Sie dort erreichen wollen

.box { 
    color: #212121; 
    padding: 0; 
    float: left; 
    margin: 5px; 
    width: 225px; 
    height: 85px; 
    background: #ffffff; 
} 

.box img { 
    text-align: center; 
    width: 75px; 
    height: 75px; 
    -moz-transition-duration:0.6s; 
    -webkit-transition-duration:0.6s; 
    -o-transition-duration:0.6s; 
} 

.circle { 
    position: absolute;  
    text-align:center; 
    width:30px; 
    height:30px; 
    background-color:#fff; 
    font-family: calibri; 
    font-size:18px; 
    line-height:28px; 
    padding:15px; 
    margin: -70px 8px; 
    opacity:0; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    -moz-transition-duration:0.6s; 
    -webkit-transition-duration:0.6s; 
    -o-transition-duration:0.6s; 
} 

.box:hover .circle { 
    opacity:0.5; 
    -moz-transition-duration:0.6s; 
    -webkit-transition-duration:0.6s; 
    -o-transition-duration:0.6s; 
}

Quelle

2016-03-31 09:48:43

Bild mit Opazitätsänderung und Kreisüberlagerung?

Antwort

Verwandte Themen