不能正确行事。 不允许编辑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>
应该是这样的:
答案 0 :(得分: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>