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

How to retrieve items from a DynamoDB table where the fields array is not empty using JavaScript FilterExpression

Can anyone help me with filtering this sample dynamodb table to only return items where either the "old" or "new" array is not empty? In the example below, it should retrieve the items with id "2" and "3". Table: field name = item [ { id: "1", p ...

javascriptamazon-dynamodbfilterexpression

How can it be that "Function" actually functions as a function?

In JavaScript, there exists a function called "Function". When you create an instance of this function, it returns another function: var myfunc = new Function('arg1','arg2','return arg1+arg2'); In the above example, the vari ...

javascriptobject

Guide to periodically updating and displaying a <b-img> element in VueJS

Recently delving into the world of JS and Vue. Within my Bootstrap-Vue project, there's an image element that looks like this: <b-img src="/api/camera" fluid alt="camera"></b-img> Whenever the page is refreshed, the br ...

javascripthtmlvuejs2bootstrap-vue

Issues with Javascript code syntax

I have encountered an issue while creating a new literal control from code behind. I am able to add standard HTML into it successfully, however, when I try to insert <%= SomeDiv.ClientID %> into the literal control, it simply prints exactly what is i ...

javascriptasp.netsyntax

I am looking to share videos and large files without the use of a flash plugin

Looking for a way to upload videos without using the Flash Plugin and without relying on the browser's default browse button, especially for large files. It would be great to have a progress bar displayed during the upload process. Alternatively, is ...

phpjavascriptjqueryvideofile-upload

Struggling with PHP variables and AJAX JavaScript

Hey everyone, I've made some edits and have a new question regarding a similar issue. On test.php in my Apache server, I have a PHP script that connects to a database and retrieves data from a table. <?php $con = mysqli_connect("localhost", "user" ...

javascriptphpjqueryajax

Guide on incorporating a refresh button to automatically update information from a database in MaterialUI's Datagrid

Recently diving into JavaScript, I encountered a common issue: The data for my table is sourced from a MySQL database through Axios Whenever CRUD operations are performed in the web app, the database is updated accordingly Although backend changes ...

javascriptreactjsmaterial-ui

Creating a hierarchical tree in JavaScript and generating nested UL/LI output with ExpressJS

I have a piece of code from another request that is functioning properly. It creates a hierarchical tree with deep levels using JSON. However, I require the output to be in the form of an HTML UL/LI nested structure or a select menu for parent and child el ...

javascriptnode.jsexpress

Having trouble executing an npm script - getting an error message that reads "Error: spawn node_modules/webpack/bin/webpack.js EACCES"

After installing and configuring Linux Mint, I encountered an error when trying to run my project with the npm run dev command. The error message "spawn node_modules / webpack / bin / webpack.js EACCES" keeps appearing. I have attempted various methods fo ...

javascriptnode.jslaravel-mix

In a perplexing twist, requests made to the Express app arrive with empty bodies despite data being sent, but this anomaly occurs

Welcome to the community of inquisitive individuals on Stack! I'm facing an interesting challenge while developing an Express app. Despite everything running smoothly with two routes, I've hit a roadblock with one route that seems to have empty i ...

javascriptnode.jsexpressroutesrequest

Tips for troubleshooting the error "Cannot locate module mp3 file or its associated type declarations"

Seeking guidance on resolving the issue with finding module './audio/audio1.mp3' or its type declarations. I have already attempted using require('./audio/audio1.mp3'), but continue to encounter an error. ...

javascripttypescriptreact-hooks

Text in Angular vanishes upon reopening

I have a code snippet where I am trying to allow the user to edit and save a paragraph displayed on a side panel of the main page. Although the code works fine, allowing users to update the text and see it reflected in the network upon saving, there seems ...

javascripthtmlangulartypescript

Validate forms using jQuery with the power of ajax

Is there a way to effectively check for the existence of a username? I want to increment a variable called "form_error" if the username already exists. If "form_errors" is greater than 0, I need the code to stop and return false. However, when I use an Aj ...

javascriptjqueryajaxvalidation

Is there a way to update a single document in a MongoDB database using Mongoose without directly referencing the document?

Let's say I have an example: 1 //Let's say I have an example 2 3 app.post('/update', validate, async (req, res) => { 4 const {title, description, post_id} = req.body; 5 6 // Updating one of them if they exist 7 ...

javascriptnode.jsmongodbmongoose

Tips for ensuring browsers maintain the aspect ratio specified by width and height HTML attributes when CSS is applied

I am seeking a method to reserve space in my layout for images before they are loaded by adding width and height properties to the img element. This approach functions as anticipated: img { display: block; border: 1px solid tomato; } <img src="" ...

htmlcssimage

Ways to expand a Bootstrap input field by clicking on it:

I have successfully created a search bar in my navbar, but I am looking to add functionality that allows the input field to expand to its normal size when clicked. I believe this will require some JavaScript implementation, however, I am unsure how to proc ...

javascripthtmltwitter-bootstrap

How to extract a section of a string with AngularJS

Can someone help me figure out how to remove the last part of a string in order to obtain just the main word? For example, turning string(1) into string. Any suggestions would be appreciated! PS. Note that the string might look like this: sringggg(125). ...

javascriptjqueryangularjs

Reverting back to the specified CSS style

In my application, I have a common HTML component styled as follows: .box { min-width: 100px; padding: 20px 10px; } There are over 100 of these components and they each have a unique border style without a bottom border: .box:nth-child(1) { border ...

cssoverriding

Dynamic scrolling text for overflowing text display

Here's a scenario I'm facing: Let's say I have three div tags, each 100 pixels wide: <--- DIV WIDTH ---> Text in div 1 Text in div two, it overflows Text in div three <--- DIV WIDTH ---> Currently, I've set the following C ...

javascriptjqueryhtmlcssmarquee

When switching tabs in Javascript, the page does not automatically reload. However, the page will reload only when it is on

After writing a code using javascript/Youtube API + PHP to fetch a YT video ID from a MySQL server and place it in Javascript, I realized that the page only reloads when the tab is active and not when it's in the background. This issue disrupts the wh ...

javascriptphpjqueryhtmlgoogle-chrome