背景悬停颜色从盒子中移出

时间:2016-09-14 12:22:05

标签: html css

当我将鼠标悬停在我的图片/框上时,为什么悬停颜色不会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;
}

2 个答案:

答案 0 :(得分:0)

尝试删除hover规则中的所有多余信息(即非悬停规则中已有的内容),这会将此CSS规则缩减为:

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

答案 1 :(得分:0)

制作父容器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中移动)