图像上方的文字左右滚动

Question

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

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 规则中。看起来是遗留盒模型对 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>

图像上方的文字左右滚动

Text over top of image scrolling left and right

html

css

image

text

rollover