Does not set display as flex when mouse over

Question

Does not set display as flex when mouse over

Navigation

#1 by (1 votes)

0

While passing the mouse over the name class 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: 300px;
  height: 200px;
}
.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 flex

asked by anonymous 28.06.2017 / 02:40

1 answer

Save in the database the information of a variable in Codeigniter How to pass a text from the database to display as a link on a site

score 1 · Accepted Answer

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