图像左上方和右方滚动的文字

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规则。它看起来像是传统的盒式模型处理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>