带有图像的 HTML 圆 div 试图获取悬停文本

Question

当我将鼠标悬停在一个包含图片的圆形 div 上时，我试图获得一个显示“阅读更多”的方形 div。一直在尝试不同的事情，但没有在谷歌上找到可行的解决方案。

HTML

        <div class = "portfolio" id = "first"> <!-- makes the circle -->
            <a href = "cake-page.html"> 
                <div class = "readm"> Read more </a> </div>
                <img src = "cake.jpg" /> 
                    <p> The cake </p> </div> 

CSS

.portfolio {
    /* the circles on the portfolio-page */
    position: relative;
    border-radius: 100%;
    display: inline-block;
    height: 150px;
    width: 150px;
    border: 2px solid purple;
}



.portfolio.img {
    opacity: 1;
    transition: 1s ease;
    background-size: 90px 0px;
    overflow: hidden;
    border-radius: 100px;
   -webkit-border-radius: 50px;
   -moz-border-radius: 50px;
    width: 150px;
    height: 150px;
}

.portfolio:hover {
     /* hover effect on portfolio circles */
    opacity: 0.6;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    transition: 1 ease; 
    visibility: visible;
}   

因此，要么文本将图像向下推，要么它停留在圆圈的顶部，我无法让它与其他悬停效果一起悬停。当与其他悬停效果一起悬停时，我希望“阅读更多”在矩形 div 中弹出。我没有包含 div 类“readm”，因为我无法让它工作。仅供引用，我对此很陌生。谢谢。

Answer 1

没有工作示例有点困难，最好看看 readm css，因为我们需要看看什么不工作。也就是说，您是否尝试过这样的事情:

.readm {
  opacity:0;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

.portfolio:hover .readm {
  opacity:1;
}

此外，我会在 readm div 中放置一个标记的开头。