Text over top of image scrolling left and right

Question

I am trying to create a rollover effect image with CSS. The image starts with just a title overlaid, then when hovered over a text overlay appears. I am happy with how it is going so far, except the text area that comes over the top the text runs off to the right. Also you can scroll up and down, but i am assuming this is the same problem?

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;
}

Appreciate any comments that may help to solve.

Thanks

Answer 1

If you're not supporting IE7 and lower, try adding a box-sizing: border-box; property to your .service-overbox rule. It looks like it's the legacy box-model's handling of padding that is tripping you up.

.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>