Scrolling left and right, text floats atop the image

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

Answer №1

To improve compatibility with modern browsers and avoid issues with legacy box-model handling of padding, consider adding the box-sizing: border-box; property to your .service-overbox rule. This will ensure consistent layout and sizing for your elements.

.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; /* Added for improved layout */
}
.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve properly formatted text from the editor.document using the VSCode API

I have been working on creating a personalized VSCode extension that can export the current selected file contents as a PDF. Although PrintCode exists, it does not fit my specific needs. The snippet of code I am currently using is: const editor = vscode.w ...

Flexbox Alignment Problem with Mixed Text and Image Elements

Struggling to achieve a layout like the one in this image using Flexbox. Take a look: https://i.sstatic.net/EGsAN.png After some difficulty with floats, I've decided to experiment with flexbox. My CSS is set up to display the image correctly. The ...

I receive an [object HTMLCollection] as the output

I am currently working on recreating a login page and I want it so that when the button is clicked, it displays the name you entered, but instead, it returns [object HTMLCollection]. My expectation was to have the name displayed as entered. var nombre ...

Maintain uniform product dimensions for images and configurable swatches in Magento

I am new to using Magento and I am currently working on setting a consistent product image grid size of 500px x 500px for the product detail page. Some of my product images are in square or rectangular shapes, so I need to resize them to fit into the grid ...

Adjust the color of the glyphicon icon within a date and time picker dropdown component

I decided to implement the bootstrap datetimepicker using this gem and utilized the following HTML code: <div id="custom-dates" style=" clear:both;"> <div class="container"> <div class="row"> <div class='col-md-3 col-xs-3' ...

The transparency of an image is being lost when it is used in a modal

I am facing an issue when trying to append a modal that contains only a transparent gif. The problem arises when the transparent background of the gif is not displayed properly. There seems to be no issue with the transparency settings of the gifs themselv ...

Using a background image in a React component

Currently, I am working on a webpage and facing an issue while trying to set a background image for a Material UI element using the background-image CSS property. Despite researching online for solutions, I am unable to make the image appear. P.S.1: I eve ...

issue arising where the table's border is not displaying

I'm confused about why the border of the first tbody tr's td is not visible. https://i.stack.imgur.com/Fwlv7.png I can't see any reason why the border is not showing up. Here's what I've figured out: If the natural height of th ...

Expand the contents inside a div without affecting the actual div

Is there a way to zoom out the contents of a div similar to how a browser zooms out a page? I'm working on an application that loads a page into a div. However, I want to load the content without scroll bars. This would require zooming out the conten ...

Stop the image transformation/transition when the back face is not visible

Experience the magic of a box that flips with just a click. Inside, an image awaits to zoom in upon hovering. Check out this sample. The only glitch is that the zoom transition on the hidden image appears for a brief moment when I move my mouse out or ba ...

css position:absolute stacked

Looking for a solution, I'm trying to include a side menu (navbar) on my page by using position: fixed. However, I am facing an issue where all the HTML elements I attempt to add are ignoring it. Check out the positioning problem here. ...

Update the link's name and href using jQuery

i have a link with this href <div id="site_change"> <a id="mysite" href="https://halloweentorino.com/">halloween torino</a> </div> but I want to change the href and the name of the link within it <div id="site_change"> ...

If the width is divisible by a certain value

I have a question regarding the width of my element that I want to divide by 90. If this width is a multiple of 90, I set the width of the element. If not, I move on to the next. For example, when the window width is 1000px and the element is at full widt ...

What causes the input to be rendered as read-only when using the value attribute and as read-write when using the defaultValue attribute?

Within my shopping cart, the quantity of items added dynamically increases by +1 each time the same item is added. Additionally, users can manually adjust the quantity of an item within the cart to their preference. I encountered a dilemma with using the ...

Ensure that the Bootstrap image element maintains its full height without resizing

While working on my Angular application, I encountered an issue with designing a side list-group of recent blogs using Bootstrap 4. When the aspect ratio is changed to mobile view, the images resize and become smaller to fit into the div as the title lengt ...

Hover to stop menu movement

Can someone help me achieve a similar menu hover effect like this one? I'm trying to create a menu with a hold/pause effect on hover, specifically in the section titled "A programme for every vision". The goal is to navigate through the sub menus smo ...

Trouble with Contact Form: PHP failing to display INPUTs

I've been grappling with this issue for a few days now, scouring through countless questions and tutorials. The Contact Form on my website seems to be working—it submits, confirms, and redirects as expected. However, there's one major problem: ...

The SVG icon displays properly when viewed on a local machine, but is missing when the website is deployed

Something strange is happening with my SVG sprites. Everything seems to be working fine when I test my code locally, but once deployed on Firebase, one of the SVG images fails to appear. What could be causing this issue? Below is the code for two SVGs: sm ...

What is the best way to ensure the header spans the entire width of a webpage using the display: flex; property and flex-direction: column styling within the body element

Click here for the CSS code snippet Hello everyone, this is my very first query on Stack Overflow. I know it might be a simple question but it's my first time posting here so kindly bear with me. Below is the CSS code snippet provided: *{ ...

PHP and Ajax do not $_POST the selected option value in <select>

I have implemented a system with two dropdown menus, one of which utilizes AJAX to fetch data from the database and present partial results on the page. Despite successfully submitting other input text (machine_no), I am encountering difficulties in postin ...