Вёрстка label для загрузки файлов

115

11 марта 2022, 17:40

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

Answer 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>