Guide to display half of an image and allow for full image viewing upon mouse hover

After creating my bootstrap 4 website, I encountered an issue with the code below where only half of the image is displayed initially due to a conflict in the code. It also fails to work properly when moving the mouse after shifting the whole image from right to left. Does anyone have a solution for this?

View Example PROTOTYPE HERE

Thank you!

.moving-left
{

    position: relative;
    transition: transform 0.3s ease;
    transform: translateX(0px);

}
.moving-left:hover
{
    transform: translateX(-80px);
}

.moving-left button
{
    left: 14px;
    position: absolute;
    top: 30px;
    z-index: 99;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row mb-75">
                        <div class="col-lg-7">
                            <div class="anime-image-wrapper">
                                <div class="feature-image-wrap ml--55">
                                    <div class="moving-left">
                                    <img src="https://colorlib.com/wp/wp-content/uploads/sites/2/best-bootstrap-admin-templates.jpg" class="wow zoom" alt="astriol feature">
                                    </div>
                                </div>

                                <span class="circle" data-parallax='{"y": -70}'></span>

                                <div class="anime-dot">
                                    <img src="media/feature/dot.png" alt="astrion dot">
                                </div>
                            </div>
                            <!-- /.anime-image-wrapper -->
                        </div>
                        <!-- /.col-md-6 -->
javascripthtmlcssbootstrap-4

Answer №1

It seems the question is a bit unclear, but I believe you are looking to have an image on the left that slides to the right when hovered over.

.moving-left
{

    position: relative;
    transition: transform 0.3s ease;
    transform: translateX(-50vw);

}
.moving-left:hover
{
    transform: translateX(0vw);
}

.moving-left button
{
    left: 14px;
    position: absolute;
    top: 30px;
    z-index: 99;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row mb-75">
                        <div class="col-lg-7">
                            <div class="anime-image-wrapper">
                                <div class="feature-image-wrap ml--55">
                                    <div class="moving-left">
                                    <img src="https://colorlib.com/wp/wp-content/uploads/sites/2/best-bootstrap-admin-templates.jpg" class="wow zoom" alt="astriol feature">
                                    </div>
                                </div>

                                <span class="circle" data-parallax='{"y": -70}'></span>

                                <div class="anime-dot">
                                    <img src="media/feature/dot.png" alt="astrion dot">
                                </div>
                            </div>
                            <!-- /.anime-image-wrapper -->
                        </div>
                        <!-- /.col-md-6 -->

Answer №2

To achieve this effect, you can utilize the clip-path property along with the inset() function and the :hover pseudo-class.

#image-wrapper {
  background-color: black;
}

#img1 {
  clip-path: inset(0 50% 0 0);
}

#img2 {
  clip-path: inset(0 0 50% 0);
}

img:hover {
  clip-path: none !important;
}
<div id="image-wrapper">
  <img id="img1" src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png" />
  <img id="img2" src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png" />
</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

Is there a way to keep the input field data in my form in next js persist even after the page refreshes?

I am currently developing a form in Next.js and I need the data to persist even after the page is refreshed or reloaded. Unfortunately, local storage does not work with Next.js, so I am exploring other alternatives. Every time I try to use local storage, ...

javascriptreactjsformsnext.js

Can we resize the button to match the width of the blue bar?

.nav-info { height: auto; background-color: darkblue; color: white; padding: 1em; padding-left: 5%; flex-direction: row; justify-content: space-between; } .flexbox { display: flex; } .info a { color: white; text-decoration: none; fo ...

htmlcssflexbox

Guide to exporting several Chart.JS graphs to a PDF document with each graph on a separate page

I am currently utilizing the JavaScript code provided below to generate a pdf file containing multiple charts. However, all the charts are being placed on a single page. My inquiry is regarding how I can customize the code to have each chart on its own sep ...

javascriptpdfcanvas

Guide to Incorporating a Marker into an SVG Blinking Rectangular or Circular Border Image on Google Maps

I have a link that points to a specific location on Google Maps using latitude and longitude: http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png Now, I am looking to add a blinking border to this marker link. Is there a way to achieve this ...

javascripthtmlcssimagephotoshop

Addressing see-through box styling in CSS

When working on a website using HTML and CSS, I encountered an issue with a transparent box. All elements within this box are also transparent, but I want them to be solid without any opacity. How can I resolve this? .parent { display: inline-block; ...

htmlcssdjangoopacity

Adjust the quantity of divs shown depending on the value entered in a text input field

It seems like I am on the right track, but there is something simple that I am missing. I'm currently utilizing the jQuery knob plugin to update the input field. $('document').ready(function() { $(".knob").knob({ c ...

javascriptjqueryhtmlfilter

Tips on avoiding blurring when making an autocomplete selection

I am currently working on a project to develop an asset tracker that showcases assets in a table format. One of the features I am implementing is the ability for users to check out assets and have an input field populated with the name of the person author ...

javascriptjqueryhtml

How do I redirect with a GET method after calling the *delete* method in Node / Express server?

As someone new to AJAX and Node, I encountered a dilemma that I hope to get some guidance on. Here's the issue: I have a DELETE ajax call that removes a row from the database and I want to redirect back to the same route with a GET method afterwards. ...

javascriptajaxnode.jsexpress

Exploring the world of jQuery and Ajax to retrieve a full HTML framework

I'm a beginner in jQuery and JavaScript programming. While I've managed to use jQuery for my Ajax calls, I'm facing an issue that has me stumped. When making an Ajax call, I'm trying to return a complete HTML structure, specifically a ...

javascriptjqueryhtmlajax

What is the best way to link assets within an Angular custom element (Web Components)?

After successfully creating a web component and referencing an image from my asset folder, everything was running smoothly on my local environment. However, when I published my custom element to Firebase hosting, I encountered some issues. When trying to ...

javascriptangularweb-componentcustom-element

Navigating through the nested object values of an Axios request's response can be achieved in React JS by using the proper

I am attempting to extract the category_name from my project_category object within the Axios response of my project. This is a singular record, so I do not need to map through an array, but rather access the entire object stored in my state. Here is an ex ...

javascriptreactjstypescriptreact-reduxjsx

Issue with CSS background images

I'm having trouble trying to use this image as my background: . It just won't work... An error occurred while trying to set the background image. The declaration was dropped. Here is the HTML code: <div class="linkedin"></div> A ...

htmlcssbackground-image

Is there a way to use Lodash to quickly return the same value if a condition is met using the ternary operator

Is there a condensed way to do this using Lodash? (or perhaps Vanilla JS/TypeScript) var val = _.get(obj, 'value', ''); Please note that var val = obj.value || ''; is not suitable as it considers 0 and false as valid but fal ...

javascripttypescriptlodash

Arrange the element as though it were the foremost

My specific scenario is as follows: <div id="container"> <p id="first">...</p> <p id="second">...</p> </div> I am looking to rearrange the order of second and first within the HTML stru ...

htmlcss

HTML min-width is not being considered by the media query breakpoint

After resizing the browser window to less than 480px, my site reverts back to its original style (the css not defined inside the mixins). I attempted to limit the html with min-width, but despite the browser displaying a horizontal scrollbar, the css still ...

htmlcssmedia-queriescontainer-queries

Building VSCode on Windows: A step-by-step guide

I am currently in the process of compiling https://github.com/Microsoft/vscode from the source code, but I am facing some challenges. After successfully running scripts\npm.bat install, I proceeded to run scripts\code.bat and a strange window app ...

javascriptnode.jswindowsnpmvisual-studio-code

Display the number of rows per page on the pagination system

Looking for a way to add a show per page dropdown button to my existing pagination code from Mui. Here's the snippet: <Pagination style={{ marginLeft: "auto", marginTop: 20, display: "inline-b ...

javascriptreactjsmaterial-uipagination

HTML/CSS - Troubleshooting Animation Issues

I am currently experimenting with different website animations and implementing responsive design. However, I encountered an issue when trying to apply these changes to my header, which also affects the .heading element. It seems that there is a problem w ...

htmlcssresponsive-designcss-animationsresponsive

The art of encapsulating JSON response objects in Ember Objects with a deep layer of wrapping

Currently, I am engaged in a project using Ember where I retrieve a complex JSON response in a Route's model function. In the associated template, I exhibit attributes of the response. Some of these attributes allow for specific actions that result in ...

javascriptjsonember.js

Angular.js enables the ability to display views from several partials that are loaded dynamically

My goal is to create a view composed of multiple partials that are loaded dynamically based on the content type. While I am new to angular.js, my current approach in the controller involves: $(elem).html(string_with_src); $compile(elem.contents())($scope) ...

javascriptjqueryangularjs