我的html中有以下图和标题:
<figure id="pub_img"><img src="images/{{image.link}}" >
<figcaption>{{image.caption}}</figcaption>
</figure>
下面的css代码除其他外执行以下操作:
- 确保人物和IMG符合宽度并向右浮动
- 在图像和标题周围制作1 px的黑色边框
- 悬停时，放大整个figure-IMG-caption struct .
我有一个无法解决的问题:
zoom 还增加了1 px黑色边框--这变得相当丑陋.我不知道如何在不增加赋予它们的边框的情况下增加数字、IMG、figtitle.
我该怎么做呢？
#pub_img:hover {
-webkit-transform: scale(4);
-moz-transform: scale(4);
-o-transform: scale(4);
transform: scale(4);
}
#pub_img {
border: 1px solid #555;
float: right;
width: 80px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}
figure {
display: table;
border: 1px solid red;
width: 80px;
}
figure img {
width: 100%;
margin: 0px;
padding: 0px;
vertical-align: middle;
}
figure figcaption {
border-top: 0.1px solid gray;
background-color: #ffffff;
font-size: 0.2em;
text-align: justify;
}<figure id="pub_img"><img src="https://picsum.photos/600/300">
<figcaption>Lorem Ipsum</figcaption>
</figure>