Question

我正在尝试创建一种悬停效果，该效果可以垂直和水平显示图像中心的文字。我的主要问题是文本始终保持在图像的顶部，当我尝试使用百分比或像素进行导航时，整个悬停效果背景会改变其比例。

在这个JS小提琴中你可以看到我在做什么，只是将鼠标悬停在左图上以实现效果。文本只显示在顶部，而不应该显示。

<div class="container-fluid">
                <div class="row " id= "faded">   
                            <img src = "img/logo.png" class ="img-responsive" id = "logo">


                    <div class = "col-md-3 col-sm-3 col-xs-12" >

                    <img src = "img/1.jpg" class = "img-responsive" id ="left-image">
                            <div class = "carousel-caption" id = "pricing">
                                <h2>PRICING</h2>
                            </div>


                            <div class = "text">

                                HAIRCUT  $45<br>
                                SHAVE     $45<br>
                                COMBO     $80<br>

                            </div>

                    </div>

                    <div class = "col-md-6 col-sm-6 col-xs-12">

                    <img src = "img/2.jpg" class = "img-responsive" id = "middle-image">
                    <div class ="carousel-caption" id = "about-us">
                        <h2> ABOUT US </h2>
                    </div>

                    <img src = "img/3.jpg" class = "img-responsive" id= "mid-image">
                        <div class ="carousel-caption" id = "contact-us">
                        <h2> CONTACT US </h2>
                    </div>

                    </div>



                    <div class = " col-md-3 col-sm-3 col-xs-12">
                        <img src = "img/4.jpg" class = "img-responsive" id = "right-image">
                        <div class ="carousel-caption" id = "appointments">
                        <h3> APPOINTMENTS </h3>
                         </div>
                    </div>


                </div>
    </div>

使用的CSS代码：

#logo{
height: 10%;
width:15%;
}
.col-md-6, .col-md-3{
padding-left:0px;
padding-right:0px;
}
.img-responsive{
margin-left:0px;
padding-left:0px;
}

#pricing{
bottom:89%;
left:-30%;
}

#about-us{
bottom:89%;
left: -55%;
}

#contact-us{
bottom: 39%;
right:-53%;
}

#appointments{
bottom:89%;
left:-15%;
}

.text {  
    background-color: rgba(212, 212, 212, 0.83);
    position: absolute;  
    color: black;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align:center;
    font-size:2.5em;
    opacity: 0;
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;   
    pointer-events:none;
}  

 #left-image:hover ~ .text {
   opacity: 1;
 }

Answer 1

在你的CSS中

你需要添加

padding-top: 50%;

像这样 -

.text {  
    background-color: rgba(212, 212, 212, 0.83);
    position: absolute;  
    color: black;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding-top 50%;
    text-align:center;
    font-size:2.5em;
    opacity: 0;
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;   
    pointer-events:none;
}

padding从内到外改变边界的距离。见 - http://www.w3schools.com/css/css_padding.asp

悬停时的文字没有正确居中CSS

1 个答案: