Trying to implement a rollover effect image using CSS. The initial state shows only the title, but upon hovering, a text overlay appears. Everything seems to be working well except that the text area extends off to the right. Also, there is scrolling up and down but it seems to be related to the same issue?
Let me know if you can help troubleshoot this issue.
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;
}
Any insights on how to address these issues would be greatly appreciated!
Thank you