图像顶部的文本左右滚动

Question

我正在尝试使用 CSS 创建翻转效果图像。图像以仅覆盖的标题开始，然后当将鼠标悬停在文本覆盖上时出现。到目前为止，我对它的进展感到满意，除了顶部的文本区域，文本向右运行。你也可以上下滚动，但我假设这是同样的问题？

https://jsfiddle.net/p27sf4e1/3/

HTML

<div class="service-box">

<p class="box-title">Social Media</p>

<div class="service-overbox">

<h2 class="title">Social Media</h2>

<p class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac sodales lorem. Donec condimentum feugiat feugiat. Vestibulum blandit dolor risus, eget fringilla sem suscipit vel. In id ex ut nulla mollis suscipit nec in velit. Fusce auctor dapibus elit. Nam in justo sapien.</p>

</div>

</div>

CSS

.service-box .overtext {
    -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;
    transform: translateY(40px);
    -webkit-transform: translateY(40px);
}

.service-box .title {
    text-align: center;
    opacity: 0;
    transition-delay: 0.1s;
    transition-duration: 0.2s;
}

.service-box:hover .title,
.service-box:focus .title {
    opacity: 1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}

.service-box .tagline {
    text-align: center;
    opacity: 0;
    transition-delay: 0.2s;
    transition-duration: 0.2s;
}

.service-box:hover .tagline,
.service-box:focus .tagline {
    opacity: 1;
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
}

.service-overbox {
    background-color: #000000;
    position: relative;
    color: #fff;
    z-index: 2;
    -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;
    opacity: 0;
    width: 100%;
    height: 100%;
    padding: 30px;
}

.service-box:hover .service-overbox { opacity: 0.7; }
.service-box:hover .box-title { opacity: 0; }

.service-box {
    cursor: pointer;
    position: relative;
    overflow: auto;
    height: 380px;
    width: 100%;
    max-width: 580px!important;
    background-image: url(http://www.voicecommunications.co.uk/voice-website-new/wp-content/uploads/2016/07/voice-social-media.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}


.box-title {
    position: absolute;
    top: 40%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 38px;
    line-height: 38px;
    font-family: 'Anton', sans-serif;
    color: #00AAC4;
}
.tagline {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    line-height: 28px;
}

.title {
    font-size: 40px!important;
    font-family: 'Anton', sans-serif;
    font-weight: 600;
    margin-bottom: 10px;
}

感谢任何可能有助于解决的问题。

谢谢

Answer 1

如果您不支持 IE7 及更低版本，请尝试将 box-sizing: border-box; 属性添加到您的 .service-overbox 规则中。看起来是旧版 box-model 对 padding 的处理让你失望了。

.service-box .overtext {
  -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;
  transform: translateY(40px);
  -webkit-transform: translateY(40px);
}
.service-box .title {
  text-align: center;
  opacity: 0;
  transition-delay: 0.1s;
  transition-duration: 0.2s;
}
.service-box:hover .title,
.service-box:focus .title {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}
.service-box .tagline {
  text-align: center;
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 0.2s;
}
.service-box:hover .tagline,
.service-box:focus .tagline {
  opacity: 1;
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
}
.service-overbox {
  background-color: #000000;
  position: relative;
  color: #fff;
  z-index: 2;
  -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;
  opacity: 0;
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
}
.service-box:hover .service-overbox {
  opacity: 0.7;
}
.service-box:hover .box-title {
  opacity: 0;
}
.service-box {
  cursor: pointer;
  position: relative;
  overflow: auto;
  height: 380px;
  width: 100%;
  max-width: 580px!important;
  background-image: url(http://www.voicecommunications.co.uk/voice-website-new/wp-content/uploads/2016/07/voice-social-media.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
.box-title {
  position: absolute;
  top: 40%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 38px;
  line-height: 38px;
  font-family: 'Anton', sans-serif;
  color: blue;
}
.tagline {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  line-height: 28px;
}
.title {
  font-size: 40px!important;
  font-family: 'Anton', sans-serif;
  font-weight: 600;
  margin-bottom: 10px;
}

<div class="service-box">

  <p class="box-title">Social Media</p>

  <div class="service-overbox">

    <h2 class="title">Social Media</h2>

    <p class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac sodales lorem. Donec condimentum feugiat feugiat. Vestibulum blandit dolor risus, eget fringilla sem suscipit vel. In id ex ut nulla mollis suscipit nec in velit. Fusce auctor dapibus
      elit. Nam in justo sapien.</p>

  </div>

</div>