The left margin in Carousel is malfunctioning when it comes to hovering

I would like to achieve an effect where, on hover, my images shift the other images to both the left and right. However, currently when hovered, all the images shift to the right only.

The code snippet in question is as follows:

.item-img:hover {
  transform: scale(1.3);
  margin: 0 70px 0 70px;
  opacity: 1;
  z-index: 950;  
}

Despite expecting the images on both sides to shift, this code only causes them to move to the right!

So instead of the current effect (shifting right only) https://i.sstatic.net/ituQx.gif

I am aiming for a behavior where the images shift both ways, similar to this https://i.sstatic.net/dTcEZ.gif


                html {
                    scroll-behavior: smooth;
                }
        
                /* The rest of the CSS code remains the same */
 
            
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<div class="container-fluid text-center my-3 p-0">
  <div class="row mx-auto my-auto">
    <div id="ld_Carousel" class="carousel slide w-100" data-ride="carousel">
      <div class="carousel-inner w-100" role="listbox">
        <div class="carousel-item item active">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
          <img class="d-block col-2 img-fluid item-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg">
        </div>
      </div>
      <a class="carousel-control-prev controls" href="#ld_Carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next controls" href="#ld_Carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>

javascripthtmlcssbootstrap-4carousel

Answer №1

To achieve the desired effect, JQuery needs to be utilized since the current behavior adheres to CSS rules... My approach involves adjusting the position of the preceding element slightly to the left, creating space for the image to zoom out.

Check out the working snippet below:

$(document).ready(function() {
  $("img").mouseenter(function() {
    $(this).prev().css('margin-left', '-10px')
  });
  $("img").mouseleave(function() {
    $(this).prev().css('margin-left', '0px')
  });
});
[CSS styles go here]
<link rel="stylesheet" href="[Bootstrap CSS link]">
<link href="[Font Awesome CSS link]" rel="stylesheet">
<script src="[JQuery CDN link]"></script>

[HTML structure goes here]

Answer №2

To achieve the desired effect, you can simply modify or add the following CSS:

.item-img:hover {
  transform: scale(1.3);
  margin: 0;
  opacity: 1;
  z-index: 950;
  margin-left: -10px;
}

.item-img:hover,
.item-img:hover ~ .item-img{
  margin-left: 0px;
}


html {
  scroll-behavior: smooth;
}

body {
  background-color: #696969;
}

a.controls {
  position: absolute;
  color: #fff;
  text-decoration: none;
  font-size: 6em;
  background: #000;
  width: 40px;
  padding: 20px;
  text-align: center;
  z-index: 1;
}

/* More CSS rules and configurations... */


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Additional HTML code for functionality -->

Answer №3

This example demonstrates smooth scrolling on a webpage:

html {
  scroll-behavior: smooth;
}

body {
  background-color: #696969;
}

a.controls {
  position: absolute;
  color: #fff;
  text-decoration: none;
  font-size: 6em;
  background: #000;
  width: 80px;
  padding: 20px;
  text-align: center;
  z-index: 1;
}

a.controls:nth-of-type(1) {
  height: 240.625px;
  top: 120px;
  bottom: 0;
  left: 0;
  background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  scroll-behavior: smooth;
}

a.controls:nth-of-type(2) {
  height: 240.625px;
  top: 120px;
  bottom: 0;
  right: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  scroll-behavior: smooth;
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
  transform: translateX(25%);
}

.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
  transform: translateX(-25%);
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
  transform: translateX(0);
}


...

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

Keep moving forward in Sailsjs even after sending back a response with res.json();

It will keep running even if the condition is met and the code inside return res.json() gets executed. _.each(rooms, function(room){ if(room.users.length == users.length) { return res.json(room); // <-- returns but execution continues } ...

javascriptnode.jssails.js

Adjust the position of the object in relation to its current orientation

I am facing a challenge in moving an object upwards in relation to its current direction. I am working with a CubeGeometry that has a specific height, and my goal is to place an object at the top of it and have it rotate along with the cube. Simply adding ...

javascriptthree.js

The overflow:hidden property prevents me from being able to scroll down the rest of my webpage

@import url('https://fonts.googleapis.com/css?family=Indie+Flower|Lobster|Open+Sans+Condensed:300|Roboto+Condensed&display=swap'); * { margin: 0; padding: 0; } html,body { height: 100%; width: 100%; margin: 0px; padding: 0px; ...

htmlcss

Certain browsers have difficulty running CSS keyframes animations

As I work on my website, I have integrated a CSS keyframes animation that is triggered by clicking a link connected to a JavaScript function. Here is an excerpt from my CSS file: #banner { background-color: #00BBD2; position: absolute; width: 100%; heigh ...

javascriptjqueryhtmlcssanimation

implementing lazy loading for images within styled components

const UserBackgroundImage = styled.div` background: url(${(props) => props.backgroundImage}) no-repeat center center; } In my styling component, I have utilized a div for displaying background images. However, I am facing a flickering issue while wai ...

javascriptcssreactjsstyled-components

Angular is encountering an issue where double braces are not being evaluated and are instead being passed through

I'm working on an angular project and have the following code snippet: <div vh-accordion-group id="{{$index}}" panel-class="panel-info"> <div vh-accordion-header> </div> <div vh-accordion-body> </div> </div> ...

javascriptangularjs

Two sidebar panels displayed in the same tab on the Navbar page

In the Shiny navbarpage, is it possible to add 2 sidebar panels with space in between, as illustrated in the diagram linked below? Can we use HTML tags to achieve this spacing? https://i.sstatic.net/jXBXo.png Below is the code for it (Essentially, I requ ...

htmlcssshiny

Can you help me understand how to access data from a selected option?

Is there a way to ensure that selecting black from the dropdown will trigger the reading of the src attribute? What modifications are needed in this code? $('.select').click(function() { var lalala = $(this).val(); $("#gallery .imgsx"). ...

javascriptjquery

javascript inquiry about if statements

function checkValidity() { startChecked = false; finishChecked = false; alert("startChecked: " + startChecked); alert("finishChecked: " + finishChecked); if (document.dd.start.checked.length == undefined || document.dd.finish.checked. ...

javascript

"Encountering issues with calling a Node.js function upon clicking the button

I'm facing an issue with the button I created to call a node.js server function route getMentions, as it's not executing properly. Here is the code for my button in index.html: <button action="/getMentions" class="btn" id="btn1">Show Ment ...

javascripthtmlnode.js

Position the menu directly below the MaterialUI appbar

Here is a method for positioning a Menu (popover) below its parent item using the anchorEl. However, I am curious if there is an easier way to adjust the menu placement to be directly under the appbar while still aligning horizontally with the parent butto ...

jquerycssreactjsmaterial-ui

Learn how to easily toggle table column text visibility with a simple click

I have a working Angular 9 application where I've implemented a custom table to showcase the data. Upon clicking on a column, it triggers a custom modal dialog. The unique feature of my setup is that multiple dialog modals can be opened simultaneously ...

javascriptcssangulartypescript

"Mastering the Art of Placing the VuetifyJS Popover: A Comprehensive

When using VueJS with VuetifyJS material design components, how can I adjust the positioning of the Vuetify popover component to appear below the MORE button? The current placement is in the upper left corner which I believe defaults to x=0, y=0. Button: ...

javascriptvue.jsvuetify.js

The <servicename> is inaccessible within an error function in Angular2

I encountered an unusual issue in angular2. While the code below is functioning correctly: loginResult.subscribe( (data) => this.response = data, (err) => this._ajaxService.handleError(err, 'A string to summarize th ...

javascriptajaxangularscopingsubscribe

When applying the OWASP ESAPI encodeForHTMLAttribute method, I noticed that symbols are being rendered as their corresponding HTML entity numbers instead of the actual symbols

I recently started exploring OWASP ESAPI for preventing XSS and integrating the JavaScript version into my application. As per Rule #2 in the XSS prevention cheat sheet, it is recommended to "Attribute Escape" before inserting untrusted data into attribut ...

javascripthtmlencodingowaspesapi

What is the best way to incorporate a string value from an external file into a variable in TypeScript without compromising the integrity of special characters?

I am encountering an issue with importing a variable from a separate file .ts that contains special characters, such as accents used in languages like French and Spanish. The problem I am facing is that when I require the file, the special characters are ...

javascripttypescriptwebpackcharacter-encoding

Exploring the intricacies of node.js module 'config' and its configuration files default.json, production.json, and uncovering issues with a specific "Configuration property"

https://github.com/node-config/node-config Here is a quote from GitHub: To install in your app directory, follow these steps: $ npm install config $ mkdir config $ vi config/default.json" The overview explains the installation process and mention ...

javascriptnode.jsjsonexpressnode-config

Issue with the date picker UI in react-datetime not displaying correctly?

<Datetime dateFormat={false} className="form-control" onChange={this.handleChange.bind(this)}/> I am currently utilizing the react-datetime library for time selection handleChange(newtime){ this.setState({MTtime: moment(newtime).format ...

javascriptreactjsbootstrap-4material-uidatetimepicker

The system displayed an 'Error' stating that the variable 'index' is defined in the code but is never actually utilized, resulting in the (no-unused-vars) warning

I have configured eslint and eslint-plugin-react for my project. Upon running ESLint, I am encountering no-unused-vars errors for every React component in the codebase. It seems like ESLint is not properly identifying JSX or React syntax. Any suggestions ...

javascriptreactjseslint

Tips for enhancing the responsiveness of a calendar table in Bootstrap 5.2

Hello there! I need some help with adding rounded borders to tables using Bootstrap. Can anyone assist me with this? I'd be truly grateful for any guidance on this matter. Unfortunately, Stack Overflow is not allowing me to post my question, so I&apos ...

htmlbootstrap-5responsiveness