Tips for eliminating left and right spacing upon hovering over a div

Hello everyone, I need some help with an issue I am facing:

Link to the problem

<div class="col-lg-2 col-sm-6 padding-0 myteam1">
    <div class="our-team">
        <img src="http://i.dailymail.co.uk/i/pix/2017/12/27/10/4797978100000578-0-image-a-1_1514370627819.jpg" class="img-responsive" alt="myimage">
            <div class="team-content">
                <h3 class="team-title">First<small>class</small></h3>
                <p class="team-btn animate-button"><a href="#" class="custom-btn 
                btn-lg">LEARN MORE</a>
                </p>
            </div>
    </div>
</div>

Whenever I mouse over the div, there is extra space on the left and right sides. Can someone please assist me in fixing this issue? I want the background to be fully shown without any additional spaces when hovered over.

Thank you!

jqueryhtmltwitter-bootstrapcss

Answer №1

To implement the desirable effect, just incorporate the overflow property into the .myteam1 class using the following code: .myteam1{overflow:hidden;}

The main purpose of the overflow property is to determine the behavior when content exceeds the boundaries of an element's box.

This property enables you to decide between clipping the overflowing content or displaying scrollbars in case the element's content surpasses the specified area.

.our-team {
  position: relative;
  margin: 35px 0;
}

.team-btn a {
  border: 2px solid #ffffff;
  color: #ffffff;
  padding: 10px 35px;
  display: inline-block;
  margin-top: 30px;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 2px;
  margin-top: 0.5em;
}

.signup-subline {
  color: #fff;
}

.our-team img {
  width: 100%;
  height: auto;
  z-index: 1;
  transform: translateY(0px);
  transition: all 0.20s ease;
}

.our-team:hover img {
  transform: scale(1.11, 1.11);
  z-index: 99999;
  box-shadow: 1px 1px 10px 8px rgba(0, 0, 0, .1);
}

.our-team .team-content {
  position: absolute;
  bottom: 13px;
  left: 0;
  width: 100%;
  opacity: 0;
  color: #2b2f3e;
  padding: 20px 0;
  text-align: center;
  background: black;
  transform: translateY(0px);
  transition: all 0.20s ease-in-out 0s;
}

.padding-0 {
  padding-right: 0;
  padding-left: 0;
}

.our-team:hover .team-content {
  transform: translateY(46px);
  opacity: 1;
}

.our-team .team-title {
  font-size: 19px;
  color: #fff;
  margin: 0;
  letter-spacing: 1px;
}

.our-team .team-title small {
  display: block;
  color: #fff;
  margin: 1% 0 3% 0;
  font-size: 12px;
  text-transform: capitalize;
}

.our-team .social-link {
  padding: 0;
  margin: 0;
  list-style: none;
}

.our-team .social-link li {
  display: inline-block;
  margin-right: 2%;
}

.our-team .social-link li a {
  color: #444;
  transition: all 0.50s ease;
}
.myteam1 {
overflow:hidden;
}
.myteam1:hover {
  z-index: 9;
}

.our-team .social-link li a:hover {
  color: #e143eb;
}

@media screen and (max-width: 767px) {
  .our-team {
    margin-bottom: 15%;
  }
}
<div class="col-lg-2 col-sm-6 padding-0 myteam1">
  <div class="our-team">
    <img src="http://i.dailymail.co.uk/i/pix/2017/12/27/10/4797978100000578-0-image-a-1_1514370627819.jpg" class="img-responsive" alt="myimage">
    <div class="team-content">
      <h3 class="team-title">First<small>class</small></h3>
      <p class="team-btn animate-button"><a href="#" class="custom-btn btn-lg">LEARN MORE</a></p>
    </div>
  </div>
</div>

Answer №2

To incorporate this style into your CSS file, include the following CSS rule:

.our-team{ /* This CSS was taken from your jsfiddle */
    position: relative;
    margin: 35px 0;
    overflow: hidden;    /* Added this style */
}

View the updated fiddle here: https://jsfiddle.net/wLewuhz4/2/

Answer №3

Give this a shot:

.no-padding {
    padding-right:0;
    padding-left:0;
    overflow: hidden;
}

Answer №4

To remove the left and right spacing from the black background div that appears on hover, you simply need to add this code to your CSS file: .body{margin:0;}. I have checked your fiddle and this should solve the issue for you.

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

resizing a div and its ancestors automatically

Looking to create a layout with the following structure: (using MVC3 - The entire HTML is in the Layout.cshtml) A top header consisting of a banner and menu bar Content divided into left and right panes Footer The right pane contains tabs, and its heigh ...

htmlcss

having trouble with the functionality of displaying and concealing the nearest element when hovering over it

There are several elements on my page that have a similar structure: <div> <span class="content_video_wrapper_video_icon"> <i class="glyphicon glyphicon-facetime-video"></i> </span> < ...

jquery

What strategies can I implement to ensure my puzzle game functions seamlessly on a touch screen device using jQuery?

Imagine I have a puzzle game that involves mouse interactions: // One function document.onmousedown = shufflePuzzle; // Another function document.onmousedown = onPuzzleClick; Here is an example of the puzzle clicking functions: functio ...

javascriptjqueryhtmlcanvashtml5-canvas

What is preventing 100% width from filling the entire screen?

My issue involves setting the body with a width of 100% and height as auto. However, the content is not covering the full screen and an extra scrollbar is appearing from left to right. For the complete code and results, please visit the following links: ...

htmlcssbootstrap-4

Loop through the <div> elements in MVC-AJAX until all the data in the ajax success response has been iter

After exploring numerous websites, I am still struggling to find a solution. Perhaps my lack of experience with MVC is hindering my ability to recognize the answer when it presents itself. Many tutorials only cover displaying an alert message, but what if ...

jqueryajaxasp.net-mvc

What is the solution for repairing the thin wireframe of a Three.js Cube?

The issue: The Three.js 3D cube I designed with a wireframe or outline mode looks fine on desktop and tablet devices, but when viewed on mobile, the wireframe becomes too thin to be practical. I need to maintain the same wireframe thickness for mobile as i ...

javascripthtmlcssthree.js

What is the best way to create a text input that cannot be edited by users?

I am working with a text input field that looks like this: <input type="text" value="3" class="field left"> Below is the CSS code I am using to style it: background:url("images/number-bg.png") no-repeat scroll 0 0 transparent; border:0 none; color ...

htmlcsshtml-input

"Creating a Hyperlink that Navigates to Specific Content Within a

I have a situation where I am trying to link to sections on the page contained within collapsed fieldsets. My goal is that when a user clicks on this link, the page should scroll down and automatically expand the fieldset to display the content inside. E ...

javascriptjqueryfieldset

Retrieving PHP variables within the HTML document of the current page

Suppose I have a page with a link <a href='edit_info.php?id=1001'>1001</a>. In the edit_info.php page, I want to use this id to query a database, like so: SELECT * FROM table WHERE id = $_GET['id'] Now, I need to populate ...

phphtmlmysqlsql

New navigation menu changes as user scrolls

I'm struggling to find a way to implement a different navigation menu that appears when the user scrolls down. I'm envisioning something similar to this example: My goal is to have #small-menu replace #big-menu once the user starts scrolling. C ...

javascriptjqueryhtmlcss

"Need help on Tumblr: how can I make a div container wrap around a photo

Check out this website. Is there a way to make the div snugly wrap around the image? Currently, it seems to be sticking 4px below the image (as indicated by the red line I added in the background of the div). I'm puzzled as to where those additional ...

htmlcssimage

Tips for changing text color based on background dynamically in Bootstrap SASS?

Here's a thought-provoking query for those who have experience working with Bootstrap 4 sass. According to Bootstrap's documentation, when the parent block has the class .bg-dark, adding the .text-light class to the HTML is essential for achievin ...

twitter-bootstrapsassbeautifulsoupbootstrap-4

After the submit button is disabled, the form fails to be submitted

Hello, I am having an issue with disabling my button after the form is submitted. The button gets disabled, but the PHP code does not execute. I have tried various scripts from the internet, but they all seem to have the same result: the button gets disab ...

javascriptphphtmljquery

The appearance of Google Fonts varies between google.com and my own website

After experimenting with Google Fonts, I made a discovery that left me puzzled: The font displayed in my custom HTML file is not the same as the one on the Google Fonts website. Specifically, the font size appears to be significantly different (color v ...

htmlcssfontsfont-size

How can I utilize JavaScript to seamlessly loop through and display these three images in succession?

My current code is HTML, CSS, and JS-based. I am looking to design three of these div elements that appear and hide in a loop every 3-5 seconds. After the first run, I want the execution to repeat continuously. How can I modify my code to achieve this func ...

javascripthtmljquerycssloops

Distinct vertical menus with varying widths but sharing the same CSS code for the submenus

How can I create a vertical menu bar with submenus on the right side? The first submenu appears correctly, but the second one is narrower than the first. It seems like they have the same code, yet they look different. Below is the HTML code: <div clas ...

htmlcss

What is the best method for choosing these elements and surrounding them with a wrapper?

I need to style a title with two radio inputs by wrapping them in a form: <p><strong>Country</strong></p> <div class="radioWrapper"> <span class="label">Canada</span> <span class="radio"> ...

javascriptjqueryhtml

How to retrieve the selected value from multiple JQuery UI Autocomplete boxes?

I have implemented three jQuery UI 'Autocomplete' input fields on a single page: <select id="combobox1"><?php putSome1ValuesHere(); ?></select> <select id="combobox2"><?php putSome2ValuesHere(); ?></select> &l ...

jqueryautocompletejquery-ui-autocomplete

How can I verify if there are duplicate items in the cart using Angular 5?

As a newcomer to Angular 5, I am delving into creating a basic shopping cart to master the framework. However, I am currently facing a dilemma regarding how to handle duplicate entries in the cart data. Specifically, I am unsure whether I should store obje ...

javascriptjqueryangulartypescript

Displaying values in form fields when a specific class is present

Whenever I input and submit the form fields correctly using #submit_btn, my values disappear. However, when they are not valid, this issue does not occur. I attempted to address this problem with jQuery: $('#submit_btn').click(function() { i ...

javascriptjqueryhtmlcsswordpress