Изображение с изменением непрозрачности и наложением круга?

Мне кажется, что это не так сложно, но я не могу понять это. У меня в основном возникают проблемы с появлением наложения круга при наведении на изображение. Это то, что я придумалИзображение с изменением непрозрачности и наложением круга?

.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; 
}

источник

2016-03-31 Anonymous

Можете ли вы добавить HTML-код? И, возможно, даже придумайте скрипт, чтобы показать свой код в действии. – mmgross

префиксы '-moz-' больше не нужны, очищены от вашего кода. Не уверены в '-o-' и '-webkit-'. – Martijn

@Martijn Согласно [caniuse] (http://caniuse.com/#feat=css-transitions), если бы это было не для Android, вы могли бы заглушить '-webkit'', и' -o-', по-видимому, был никогда не стоит начинать с (только для одной версии). Во всяком случае, я думаю, редактируя код вопроса, потому что что-то больше не нужно, это ужасная идея! Возможно, вы случайно скрываете то, что на самом деле вызывает проблему. Конечно, здесь дело не в этом, но вы все еще эффективно меняете вопрос. И не говоря уже: включение префиксных версий не повредит, и вы можете добавить поддержку для дополнительного .1% всех пользователей. – mmgross

Ваша главная проблема заключается в том, что вы ожидаете img иметь .circle, как ребенок, который не возможно, как img является автономным элементом.

Насколько ваш HTML правильно:

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

Ваш CSS должен быть больше, как показано ниже. Вы должны переместить объявление :hover на номер .box, чтобы он стал доступен для круга (теперь это прямой ребенок). Другие проблемы с дизайном на самом деле не связаны и являются вопросом того, чего вы хотите достичь

.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; 
}

источник

2016-03-31 09:48:43

Изображение с изменением непрозрачности и наложением круга?

ответ

Смежные вопросы