1

введите сюда описание изображенияПри клике на данный объект должно открываться окно загрузки файла. Следовательно, это должен быть label. Проблема в том, что у него есть тень вокруг и внутренний отступ от неё(эффект жирной рамки). При наведении должно затемняться изображение внутри. Как это можно сделать? Пробовал через img внутри и ::after с тёмным фоном для него, но не помогло. Можно с примерном на codepen?

2

1 ответ 1

1

К тегу <img> добавление псевдоэлементов неприменимо. Поэтому, добавляем :after к <label>.

label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  width: 150px;
  margin: 15px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.07);
}
label::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  height: 130px;
  width: 130px;
  border-radius: 50%;
  transition: box-shadow .4s ease-in-out;
  box-shadow: inset 0 0 0px 0px rgba(0, 0, 0, 0.0);
}
label:hover::after { box-shadow: inset 0 0 20px 65px rgba(0, 0, 0, 0.7); }

img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}
<label for="fi">
  <img src="https://upload.wikimedia.org/wikipedia/commons/4/43/Tom_Hardy_by_Gage_Skidmore.jpg" alt="">
</label>

<input type="file" id="fi" hidden>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.