背景悬停颜色偏移框

问题描述：

为什么悬停颜色与我的图像/框悬停在一起时不是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中，请参阅我编辑的答案 –

答

试图抹掉从hover规则的所有多余的信息（即什么是已经在非悬停规则），从而降低了，此CSS规则如下：

.project_data:hover{ 
    color: #fff; 
    background-color:#1E88E5; 
    opacity: 0.8; 
}

答

使父容器position: relative。我不太知道什么是画廊应该看起来像，但与规则

.project_box{ 
    position: relative; 
    display: inline-block; 
    line-height:0; 
    } 

.project_data{ 
    padding: 10px; 
    box-sizing: border-box; 
}

画廊的行为与预期。

因为绝对定位的元素总是使用下一个相对定位的父元素作为参考，所以绝对定位的块元素总是占用下一个相对定位的父元素中所有可用的水平空间。

由于没有相对元素在你的榜样，首先在整个身体膨胀在我的jsfiddle覆盖 - 我想类似的事情发生在你的网站

所有其他规则只是用于美容效果;）

看到的jsfiddle： https://jsfiddle.net/svArtist/7b7hfy0h/

至于你居中的问题：你需要使用一个单独的DIV与你的方法文本，否则你会也影响背景。

看到这里的第一个例子： https://jsfiddle.net/svArtist/0pqg39Lh/

（在HTML只需要一个改变，其他部分可以在周围移动CSS）

背景悬停颜色偏移框

相关推荐