What is the best way to transition an absolute positioned element from right to center?

When hovering over an overlay element, I want the <h3> tag to appear with a transition effect from right to center, similar to the example shown here. Could someone please assist me in achieving this? Thank you in advance.

HTML

<div class="row mycustombox">
    <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 hidden-md hidden-sm hidden-xs" style="height: 300px; margin-bottom: 15px;">
        <a href="#" class="customoverlay">
            <img src="http://silver11.net/door/wp-content/uploads/2015/12/Furniture-EDI-for-the-Furniture-Industry.jpg" style="width: 100%; height: 300px;">
            <div class="inneroverlaybox" style="height: 300px; display: none; transition: all 0.35s ease-in-out;">
                <h3 data-fontsize="16" data-lineheight="24">World Class EDI for the Home Furnishing Industry</h3>
            </div>
        </a>
    </div>
    <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 hidden-md hidden-sm hidden-xs" style="height: 300px; margin-bottom: 15px;">
        <a href="#" class="customoverlay">
            <img src="http://silver11.net/...

<p><strong>CSS</strong></p>

<pre><code>.customoverlay {
    position:relative;
}
.customoverlay img {
    margin:0;
    padding:0;
}
...
        jQuery(window).load(function(){
            var getimagewidth=jQuery(".customoverlay").find('img').width();
            var imageHeight;
            var windowWidth=jQuery( window ).width();
            var columnPadding;

            if(windowWidth<=320){
                imageHeight='65px'; 
            }
            ...
        });
        </script>
javascriptjquerycss

Answer №1

To create this animated effect using CSS3 is quite straightforward. When the mouse hovers over, the transparency of the box changes and the text shifts to the left. Here's the CSS code:

.customoverlay {
    position: relative;
    display: block;
    width: 100%;
    height: 300px;
}
.customoverlay img {
    margin: 0;
    padding: 0;
}
.customoverlay .inneroverlaybox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    opacity: 0;
    overflow: hidden;
    -webkit-transition: opacity 0.3s ease-in-out 0s;
    -moz-transition: opacity 0.3s ease-in-out 0s;
    -ms-transition: opacity 0.3s ease-in-out 0s;
    -o-transition: opacity 0.3s ease-in-out 0s;
    background: #002137;
}
.customoverlay .inneroverlaybox h3 {
    position: relative;
    left: 100%;
    padding: 0;
    margin: 0;
    color: #fff;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
.customoverlay:hover .inneroverlaybox { opacity: 1; }
.customoverlay:hover .inneroverlaybox h3 { left: 0%; }

Codepen link : http://codepen.io/AnTSaSk/pen/wMWzpj

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

What could be causing the space between float and div elements?

Could someone shed light on the reason behind the minor gap between the top navigation element and the content div underneath it in this jsfiddle? When I float the navigation list items, a slight gap appears between the top navigation element and the main ...

htmlcsscss-float

Styling CSS for circular buttons

I am a newcomer and feeling quite puzzled. When using a div tag with the same width and height along with border-radius: 50%, it always transforms into a circle. However, when attempting to create a circular button using the 'a' tag, it doesn&apo ...

cssbuttongeometry

Exploring Relative Rotations in Three.js

I currently have a scenario where I have a THREE.Scene containing two meshes, namely meshA and meshB. Both of these meshes have been rotated differently. My objective is to take meshB out of the scene and attach it as a child of meshA, while maintaining it ...

javascriptrotationthree.jsscenegraph

What steps can be taken to handle and proceed with any outstanding AJAX requests in the event a

I am currently working on a script to automatically refresh all CSS/JS files that are marked with the attribute-data when any changes occur on the server side. Initially, I attempted to achieve this using php and jquery/javascript but now I am focusing sol ...

javascriptjqueryajaxhttp-status-code-404status

Is there a way to implement an event listener for a customized select element within a table on a webpage?

I have a table that contains columns populated from a database. I also have a custom select dropdown in one of the columns, along with an update button. I want to create an event listener for the button that captures the user's selection from the cust ...

javascriptbootstrap-4

Navigate through intricate nested JSON array structures in JavaScript

nested json structure Json Tree Structure: { "id": "30080", "dataelements": { "Name": "abc" }, "children": [ { "id": "33024", "dataelements": { "Name": "a" }, "children": [ { "id": "33024", ...

javascriptarraysjsonloops

Is it possible to simultaneously play several one-shot sound effects on mobile web browsers?

I'm attempting to trigger a sound effect when the user clicks a button on my web application. Initially, I experimented with this approach: var sound = new Audio("soundeffect.ogg"); function clickHandler(){ sound.play(); } Unfortunately, if the ...

javascripthtmlhtml5-audio

"Enhance Your Website with jQuery: Organized Lists with Fixed Length, Connected,

I currently have a list that is separated into three columns, structured as follows: Column1 Column2 Column3 1 4 7 2 5 8 3 6 9 The list ranges from 1 to 9 and each column consists of a fixed number of rows (3). I am lo ...

javascriptjqueryjquery-uijquery-ui-sortable

Order table column by checkbox status using Jquery

My datatable includes a column named Waive Fee containing checkboxes. I need the ability to sort this column so that when the header is clicked, all checked checkboxes move up or down accordingly. Is there a method in jQuery to achieve this functionality? ...

jquerysortingcheckboxstate

Create a new element by cloning the React component as an SVG named SomeSVG

I have a scenario where I am receiving an SVG as a prop in my child component. Once I receive it, I would like to manipulate it by adding some additional properties like this: {React.cloneElement(ReactSVGasProp, { className: class })} However, when I atte ...

javascriptreactjs

Can Microsoft Bot Framework chat window support rounded border corners?

Is it possible to style border corners in the Microsoft bot framework? I've attempted the following: const styleSet = window.WebChat.createStyleSet({ botAvatarImage: '/assets/logo.png', bubbleBackground: ...

cssbotframework

The query for Node.js using mysql is not defined

Recently, I've been working with Node.js and attempting to incorporate mysql in conjunction with nodejs. Specifically, I have written a query trying to retrieve numbers from a table: select numbers from TABLE, but the end result shows up as: "undef ...

javascriptmysqlnode.js

Can you leverage the class declaration from a previous style in CSS when creating a new definition?

I have exhaustively searched for the solution without success, which is leading me to believe that it may not be achievable. With my limited understanding of CSS principles, I am inclined to think that this task could pose a challenge. However, before expl ...

cssinheritance

I am seeking advice on how to incorporate JavaScript to adjust slider values and add numerical values or prices. Any suggestions would

Seeking assistance with a unique project: I am currently developing a calculator that allows users to utilize sliders to select the best option for themselves across various categories. My experience with JavaScript is limited, so I decided to reach out h ...

javascripthtmlcssconstantsslider

Exploring the Contrast between 'this' Context in V8 Javascript: Chrome versus Node.js

Check out the code snippet below: var pocket = { cash: 1000, showCash: function() { return this.cash; } }; var thomas = { name: "Thomas", work: function() { console.log('I don&bs ...

javascriptnode.jsgoogle-chromethisv8

Exploring the isolated scopes of AngularJS directives

Exploring directives in AngularJS led me to this interesting code snippet: var app = angular.module('app', []); //custom directive creation app.directive("myDir", function () { return { restrict: "E", scope: { title: '@ ...

javascriptangularjs

Can you explain the distinction between mutation and action?

Can you explain the rationale behind Vuex having both "actions" and "mutations?" I can see the point of components not directly modifying state, but it seems redundant to have actions trigger mutations to update the state. What sets "actions" apart from ...

javascriptvue.jsvuex

I am facing difficulties in adding dynamic content to my JSON file

I've encountered a challenge in appending new dynamic data to a JSON file. In my project, I receive the projectName from an input form on the /new page. My API utilizes node.js's fs module to generate a new JSON file, where I can subsequently add ...

javascriptnode.jsreactjsjsonnext.js

The navigation bar's background color remains static and doesn't update as

Struggling with HTML/CSS and unable to get the NAV bar to display the specified background color. Tried putting the nav in a class, commented out parts of the code, but still couldn't make it work. Despite looking for solutions, I can't figure ou ...

htmlcss

How to dynamically apply component-specific CSS in NextJS based on conditions

I'm working on my nextjs project and encountered an issue with adding conditional styling to a component. To address this, I created a component-level stylesheet called MyComponent.module.css, which includes the following styles: .primary { color: ...

javascriptreactjsnext.js