イメージの上に表示されるテキストが左右にスクロールする

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をサポートし、低いない場合は、お使いの.service-overboxルールにbox-sizing: border-box;プロパティを追加してみてください。従来のボックスモデルの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>