如何从左下角聚焦图像?
How do I focus an image from the bottom left?
我几乎想通了所有事情,但我似乎无法覆盖 margin-top。我需要第 4 个 child 从底部而不是中间聚焦。
.gallerya a:focus img{
width: 350%;
height: 350%;
margin-left:-120%;
margin-top:-50%;
position: absolute;
opacity: 1;
z-index: 1;
-moz-box-shadow: 0 0 5px 1px #4D4D4D;
-webkit-box-shadow: 0 0 5px 1px #4D4D4D;
box-shadow: 0 0 5px 1px #4D4D4D;
-webkit-transition-duration: 1s;
-webkit-transition-delay: 0.1s;
-moz-transition-property: width, height;
-moz-transition-duration: 1s;
-moz-transition-delay: 0.1s;
-o-transition-property:width, height;
-o-transition-duration: 1s;
-o-transition-delay: 0.1s;
cursor: default;
}
.gallerya a:first-child img{
margin-left: 0;
margin-top: 0;
}
.gallerya a:nth-child(3) img{
right:0;
margin-top: 0;
}
.gallerya a:nth-child(4) img{
margin-left:0;
}
老实说,你想要达到的目标并不是很清楚。如果你的意思是你想重置 margin-top:-50% 并为此图像使用 bottom/left 位置,你可以简单地尝试
margin-top:auto; // reset
margin-left:0px!important;
margin-bottom:0px!important;
你的意思是底部是这样固定的吗?
margin-top:auto; // reset
margin-left:0px!important;
bottom:0px!important;
我几乎想通了所有事情,但我似乎无法覆盖 margin-top。我需要第 4 个 child 从底部而不是中间聚焦。
.gallerya a:focus img{
width: 350%;
height: 350%;
margin-left:-120%;
margin-top:-50%;
position: absolute;
opacity: 1;
z-index: 1;
-moz-box-shadow: 0 0 5px 1px #4D4D4D;
-webkit-box-shadow: 0 0 5px 1px #4D4D4D;
box-shadow: 0 0 5px 1px #4D4D4D;
-webkit-transition-duration: 1s;
-webkit-transition-delay: 0.1s;
-moz-transition-property: width, height;
-moz-transition-duration: 1s;
-moz-transition-delay: 0.1s;
-o-transition-property:width, height;
-o-transition-duration: 1s;
-o-transition-delay: 0.1s;
cursor: default;
}
.gallerya a:first-child img{
margin-left: 0;
margin-top: 0;
}
.gallerya a:nth-child(3) img{
right:0;
margin-top: 0;
}
.gallerya a:nth-child(4) img{
margin-left:0;
}
老实说,你想要达到的目标并不是很清楚。如果你的意思是你想重置 margin-top:-50% 并为此图像使用 bottom/left 位置,你可以简单地尝试
margin-top:auto; // reset
margin-left:0px!important;
margin-bottom:0px!important;
你的意思是底部是这样固定的吗?
margin-top:auto; // reset
margin-left:0px!important;
bottom:0px!important;