Непрозрачность элементов css

Рейтинг: 0Ответов: 3Опубликовано: 19.01.2023

Как сделать чтобы при наведении на элемент html разметки у картинки был opacity: 100%; а у дива 50%?

html:

<div class="specialist__img-container">
          <a href="#" class="specialist-img__link">
            <img src="{% static 'main_hd/img/specialist/01.png' %}" alt="" class="scecialist-img">
            <div class="specialist__socialmedia"><img src="{% static 'main_hd/img/specialist/01.jpg' %}" alt="" height="150px" width="150px" class="scecialist-img-social"></div>
          </a>
        </div>

css:

.scecialist-img {
    border-radius: 50%;
    width: 100%;
}
.scecialist-img-social{
    position: relative;
    left: 125px;
    top: 110px;
}
.specialist__socialmedia{
    position: relative;
    height: 390px;
    width: 400px;
    border-radius: 50%;
    top: -400px;
    transition: all 0.5s ease;
    background-color: #000;
    opacity: 0%;
    z-index: 10;
}
.specialist__socialmedia:hover{
    opacity: 50%;
}
css html вёрстка
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Попробуйте вот так:

.scecialist-img {
  border-radius: 50%;
  width: 100%;
}

.scecialist-img-social {
  position: relative;
  left: 125px;
  top: 110px;
}

.specialist__socialmedia {
  position: relative;
  height: 390px;
  width: 400px;
  border-radius: 50%;
  top: -400px;
  transition: all 0.5s ease;
  opacity: 0%;
  z-index: 10;
}

.specialist__socialmedia:hover {
  background-color: rgba(0,0,0,.5);
  opacity: 1;
}
<div class="specialist__img-container">
  <a href="#" class="specialist-img__link">
    <img src="https://images.pexels.com/photos/14340865/pexels-photo-14340865.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="scecialist-img">
    <div class="specialist__socialmedia"><img src="https://images.pexels.com/photos/14340865/pexels-photo-14340865.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" height="150px" width="150px" class="scecialist-img-social"></div>
  </a>
</div>

▲ 0
<div class="specialist__img-container">
          <a href="#" class="specialist-img__link">
            <img src="{% static 'main_hd/img/specialist/01.png' %}" alt="" class="scecialist-img">
            <div class="specialist__socialmedia"><img src="{% static 'main_hd/img/specialist/01.jpg' %}" alt="" height="150px" width="150px" class="scecialist-img-social"></div>
          </a>
        </div>

<style>
div a .scecialist-img {
    border-radius: 50%;
    width: 100%;
opacity: 100%;
}
.scecialist-img-social{
    position: relative;
    left: 125px;
    top: 110px;
}
.specialist__socialmedia{
    position: relative;
    height: 390px;
    width: 400px;
    border-radius: 50%;
    top: -400px;
    transition: all 0.5s ease;
    background-color: #000;
    opacity: 0%;
    z-index: 10;
}
.specialist__socialmedia:hover{
    opacity: 50%;
}
</style>
▲ 0

opacity задаёт прозрачность как блоку, так и всем его дочерним элементам, поэтому, если назначить div opacity:50% , то как ни крути всё что внутри будет полупрозрачным. Вместо этого могу предложить сделать полупрозрачный background-color

body{
  background: black;
}
.scecialist-img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
}
.specialist__img-container{
  height: 390px;
  width: 400px;
}
.scecialist-img-social{
    position: relative;
    left: 125px;
    top: 110px;
}
.specialist__socialmedia{
    position: relative;
    height: 390px;
    width: 400px;
    border-radius: 50%;
    top: -394px;
    transition: all 0.5s ease;
    background-color: rgba(0,0,0, .5);
    opacity: 0%;
    z-index: 10;
}
.specialist__socialmedia:hover{
    opacity: 100%;
}
<div class="specialist__img-container">
          <a href="#" class="specialist-img__link">
            <img src="https://vozhzhaev.ru/img/example_img.jpg" alt="" class="scecialist-img">
            <div class="specialist__socialmedia"><img src="https://vozhzhaev.ru/img/example_img.jpg" alt="" height="150px" width="150px" class="scecialist-img-social"></div>
          </a>
        </div>