为什么悬停颜色与我的图像/框悬停在一起时不是100%对齐?它看起来像是由于某种原因向上移动了1px ...另外我怎样才能将文本“项目名称”和“项目描述”移动到框的中心?我试着用变换和<center>
标签,但没有任何效果。背景悬停颜色偏移框
代码库:
<div class="row no_gutter no_padding" id="projects">
<div class="col-md-4 project_box slideanim">
<a href="#">
<div class="project_data">
<h4>Project name</h4>
<h5>Project description data</h5>
</div>
<img src="<?php bloginfo('template_url');?>/images/portfolio/default.jpg" class="img-responsive">
</a>
</div>
<div class="col-md-4 project_box slideanim">
<a href="#">
<div class="project_data">
<h4>Project name</h4>
<h5>Project description data</h5>
</div>
<img src="<?php bloginfo('template_url');?>/images/portfolio/default.jpg" class="img-responsive">
</a>
</div>
<div class="col-md-4 project_box slideanim">
<a href="#">
<div class="project_data">
<h4>Project name</h4>
<h5>Project description data</h5>
</div>
<img src="<?php bloginfo('template_url');?>/images/portfolio/default.jpg" class="img-responsive">
</a>
</div>
</div>
CSS:
.no_gutter > [class*='col-'] {
padding-right: 0;
padding-left: 0;
margin-left:0;
margin-right:0;
}
.no_padding {
padding: 0;
}
.project_box{
/*
border:1px solid #1E88E5;
box-sizing: border-box;*/
}
.project_data{
position:absolute;
width:100%;
height:100%;
color: transparent;
user-select: none;
/*center text horizontally and vertically*/
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
/*non-selectable text by mouse boxing*/
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
.project_data:hover{
width:100%;
height:100%;
color: #fff;
/*center text horizontally and vertically*/
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background-color:#1E88E5;
opacity: 0.8;
}
的功能** **最小试玩会更多的使用比代码转储。 –
演示在这里https://jsfiddle.net/qormt73d/ – herrh
文本居中需要你将它包装到背景div中的单独div中,请参阅我编辑的答案 –