css - 带有链接的悬停图像缩放

Question

I have this image zoom effect .我怎样才能制作<a href="">Open image page</a>悬停在图像中间时出现的链接？

Answer 1

JSFIDDLE

您只需添加 text-align:center到 <a> container_image 的标签类

此外，在 <a> 中进行了一些样式更改标签如下:

.container_image a {
    margin-top: 5px;
    display: block;
    -webkit-transition: all 0.5s  ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;
    text-align:center;
    visibility:hidden;
    opacity:0;
}
.container_image:hover a {
    visibility:visible;
    opacity:1;
}