Does not set display to flex when you hover over

Asked

Viewed 15 times

0

Even passing the mouse over the class name does not appear

.img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

.img:hover {
  filter: grayscale(0%);
}

.img:hover .name {
  display: flex;
}

.container {
  width: 100%;
  height: 100%;
}

.name {
  position: fixed;
  width: 300px;
  height: 30px;
  background: rgba(0, 0, 0, .5);
  justify-content: center;
  display: none;
  font-size: 22px;
  color: #fff;
  z-index: 999;
}
<div class="container">
  <div class="name">
    Barney
  </div>
  <img class="img" src="http://www.mamamagic.co.za/wp-content/uploads/2016/01/barney.jpg">
</div>

css flexbox

1 answer

1


.container{
  width: 300px;
  height: 200px;
  position:relative;
}
.container{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container:hover .name{
  display: flex;
}

.img{
  filter: grayscale(100%);
}

.img:hover{
  filter: grayscale(0%);
}

.name{
  position: fixed;
  width: 300px;
  height: 30px;
  background: rgba(0, 0, 0, .5);
  justify-content: center;
  display: none;
  font-size: 22px;
  color: #fff;
  z-index: 999;
}
<div class="container">
  <div class="name">Barney</div>
  <img class="img" src="http://www.mamamagic.co.za/wp-content/uploads/2016/01/barney.jpg">
</div>

Browser other questions tagged css flexbox

You are not signed in. Login or sign up in order to post.