Можно ли реализовать такое на чистом css?

[vladmih]

http://take.ms/g973S

Реально реализовать такое на чистом css? Любой способ... 

Была идея светлую картинку затемнять прозрачным темным слоем через псевдоэлемент, но как потом кругом снова засветить? Как такое можно реализовать?

[Sergik+]

Копайте в сторону opacity.

[vladmih]

Копайте в сторону opacity.

Ну если на картинку наложить слой с прозрачностью темной, а еще сверху кружок без прозрачности, то мы увидем темный слов все равно. Надо чтоб кружок как бы обрезал слой нижний...

[Sergik+]

А если visible попробовать ?

[vladmih]

А если visible попробовать ?

И к чему его добавлять? Висибл не поможет...

Примерно представим:

<div class="wrap">

  <img src="tra-ta-ta">

  <div class="ring">

 <div class="overley"

</div>

Оверлей темный поверч картники абсолютно, с бОльшим зиндексом, кружок, поверх оверлея, но внутри кружка я буду видеть верлей, а не картинку...

[Sergik+]

Подумать надо.

[Нарек]

это что, при наведении должно так выглядеть или постоянно?

[hypnocolor]

http://jsfiddle.net/hypnocolor/Lddn52mk/

[vladmih]

http://jsfiddle.net/hypnocolor/Lddn52mk/

Да, но это подходит если, круг в центре, а если он в произвольном месте? этот круг может появится на любом из домов... Он не при ховере, а просто у каждого дома будет координата, которая позиционируется на доме...

Edited August 25, 2014 by vladmih

[hypnocolor]

Да, но это подходит если, круг в центре, а если он в произвольном месте? этот круг может появится на любом из домов... Он не при ховере, а просто у каждого дома будет координата, которая позиционируется на доме...

 

А в чём проблема? Вы код смотрели вообще? Всё же на блюдечке, бери и пили под себя: расположение круга можно задавать какое угодно; ховер сделан для наглядности, можно и без него делать.

[vladmih]

 

Да, но это подходит если, круг в центре, а если он в произвольном месте? этот круг может появится на любом из домов... Он не при ховере, а просто у каждого дома будет координата, которая позиционируется на доме...

 

А в чём проблема? Вы код смотрели вообще? Всё же на блюдечке, бери и пили под себя: расположение круга можно задавать какое угодно; ховер сделан для наглядности, можно и без него делать.

 

Смотрел, конечно... Я понял, что серый фон вы сделали блоком с бордером, а рамку в другом псевдо классе, просто я думаю, если картинка к примеру имеет размер 500*500 то и бордер плимерно должен иметь такую ширину...? Я правильно понимаю? 

Edited August 25, 2014 by vladmih

[hypnocolor]

Одним псевдоэлементом сделан слой, у которого круглый полупрозрачный бордер большого размера, создающий эффект чёрного полупрозрачного фона. Другим сделана круглая жёлтая рамка для получившегося круга. Если вам нужен бóльший размер квадрата — соответственно, нужны и бóльшие размеры бордера у псевдоэлемента, чтобы он квадрат заполнил без пробелов. Меняя размеры и положения элементов, можете всё перемещать куда угодно и как угодно, основная задача — полупрозрачный фон с отверстием на нём — уже решена.

Да, и не путайте псевдоклассы с псевдоэлементами.

Edited August 25, 2014 by hypnocolor

[vladmih]

Одним псевдоэлементом сделан слой, у которого круглый полупрозрачный бордер большого размера, создающий эффект чёрного полупрозрачного фона. Другим сделана круглая жёлтая рамка для получившегося круга. Если вам нужен бóльший размер квадрата — соответственно, нужны и бóльшие размеры бордера у псевдоэлемента, чтобы он квадрат заполнил без пробелов. Меняя размеры и положения элементов, можете всё перемещать куда угодно и как угодно, основная задача — полупрозрачный фон с отверстием на нём — уже решена.

Да, и не путайте псевдоклассы с псевдоэлементами.

Понял, спасибо за такое оригинальное решение, как оказалось все гениально и просто!

А еще вопрос, с clip такое реально сделать? Я им еще не разу не пользовался, но просто возможно это еще один метод? 

[hypnocolor]

Грубо говоря, clip обрезает элемент снаружи, а не вырезает пространство внутри. Кроме того, там можно работать только с прямоугольными областями. Более того, свойство устаревшее (https://developer.mozilla.org/en-US/docs/Web/CSS/clip). Поэтому в данном случае это не вариант.

Edited August 25, 2014 by hypnocolor

[vladmih]

Грубо говоря, clip обрезает элемент снаружи, а не вырезает пространство внутри. Кроме того, там можно работать только с прямоугольными областями. Более того, свойство устаревшее (https://developer.mozilla.org/en-US/docs/Web/CSS/clip). Поэтому в данном случае это не вариант.

 

Я просто смотрел пару pie (круговые диаграммы), типа как на awwwards у них клипы резали по кругу. Возможно я не понял, полную идею клипа там, но в общем как делать круговую, я так и не понял... В общем, спасибо за решение, реально годное, и много где может пригодиться теперь!

[hypnocolor]

На самом деле, я его даже не гуглил, оно само придумалось минут за 5) Ещё как вариант можно делать по-другому: квадрату задавать полупрозрачный фон, а в него помещать круглый слой, у которого будет задана фоновая картинка, такая же, как та, над которой мы слой помещаем, но спозиционированная так, чтобы она совпадала с участком, над которым в данный момент круг находится. Но, по-моему, мой вариант изящней

[vladmih]

Тот вариант с картинкой в круге мне приходил в голову, через background-position сделать, но как подумал, какой подбор по пикселям должен быть... И забил...