改变圆形图像css的悬停背景与文本在它

Question

不能正确行事。 不允许编辑html

<div class="photo_box ">
<h4>LEARN MORE</h4>
<div class="image_frame">
    <div class="image_wrapper"><a href="/lipoparticles-product"><img class="scale-with-grid" src="#" alt="" width="" height=""></a></div>
</div>
<div class="desc">
    <h4>Lipoparticles</h4>
    Lipoparticles are virus-like particles that concentrate membrane proteins in their
    native-conformation. </div>

应该是这样的：

Answer 1

我认为这会对你有帮助。

#image{
  width: 100px;
  height: 100px;
  border-radius:50%;
  background-color: red;
  position:relative;
}

#image>span{
  position: absolute;
  color:yellow;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

#image:hover{
  /*image will be selected when hover*/

  /*apply changes you want*/
  filter:grayscale(40%);
}
#image:hover>span{
  /*span will be selected when image is hover*/
  color: blue;
}

/*For advance use: pseudo element*/
/*#image:hover::after{
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: rgba(0,0,0,20%);
}*/

<div id="image">
  <span>Text</span>  
</div>

了解Beginner Concepts:Selectors和different selectors