Le texte sur le dessus de l'image défile à gauche et à droite

Question

J'essaie de créer une image d'effet de survol avec CSS. L'image commence avec juste un titre superposé, puis lorsque survolé une superposition de texte apparaît. Je suis content de la façon dont cela se passe jusqu'à présent, à l'exception de la zone de texte qui se trouve en haut du texte, le texte s'écoule vers la droite. Aussi, vous pouvez faire défiler vers le haut et vers le bas, mais je suppose que c'est le même problème?

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

Appréciez des commentaires qui peuvent aider à résoudre.

Merci

Answer 1

Si vous n'êtes pas soutenir IE7 et inférieure, essayez d'ajouter une propriété box-sizing: border-box; à votre règle .service-overbox. On dirait que c'est la manipulation du padding qui vous fait trébucher.

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