What steps are needed to create a hover box that appears on the right side of my div?

I am attempting to customize the code found at this link so that the box slides to the left side instead of the right. I thought changing right: 0; to right: 100%; in the .overlay class would achieve this, but it is not working as expected. I want it to look like the design shown in this image. Additionally, when the box slides to the right and I hover over it, I want the box to stay in place until I move my mouse away. How can I resolve this issue?

Below is the CSS code for the animation to the right side:

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 100%;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlay {
  width: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
htmlcss

Answer №1

Try using the following code snippet to animate an overlay from left on hover:

.overlay {
  position: absolute;
  bottom: 0;
  left: 0; 
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlay {
  width: 100%;
  left: -100%;
}


.container {
  position: relative;
  width: 50%;
  float:right;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0; 
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlay {
  width: 100%;
  left: -100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
<h2>Slide in Overlay from the Right</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

Answer №2

Are you looking to achieve this? https://codepen.io/anon/pen/MmNXmN

HTML

<h2>Slide in Overlay from the Right</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
    <div class="overlay">
        <div class="text">Hello World</div>
    </div>
</div>

CSS

.container {
  position: relative;
  width: 50%;
  float: right;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  right: 100%;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlay {
  width: 100%;
  right: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

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 is the process for closing the side menu by clicking on the dark area?

I created a basic side navigation menu. When you resize the window to a smaller size, a red square will appear. If you click on this red square, the menu will open. The menu opens correctly, but I want it to close when I click on the dark area instead of ...

javascripthtmlcss

Extracting unique text values from nested div elements within list items using Selenium with Python

Within the HTML code provided, I am looking to extract the text of three variables (descr_confezione, aic_farmaco, and stato_confezione) for each of the four list items: <ul id="ul_lista_confezioni"> <li style="display: list-item;"> &l ...

pythonhtmlselenium

Conceal one object when the other is revealed?

Is there a way to hide the element with the class .close-button while showing another element with the ID #loading-animation? Can jQuery conditionals help achieve this? For example: if ($('#loading-animation').is(':visible')) { $ ...

javascriptjquerycss

clear the input field of any entered text type

Just starting out with Javascript! Below is some code: This code is taken directly from the HTML page <form action="#" id="ToolKeywordSearch"> <input type="text" class="ProductFinderText" id="ToolSearchField"onblur="if(this.value==& ...

javascripthtmlcssresponsive-design

How do you use CSS to replace an HTML "rules" attribute?

When publishing to HTML using the DITA Open Toolkit, certain inline table attributes are automatically applied such as frame="border" and rules="all". I am facing an issue where I need to override the "rules" attribute for table cells using CSS styles. Wh ...

htmlcssditadita-ot

Strategies for accessing elements within a #shadow-root

Having trouble changing the display style inside of the #shadow-root and targeting it. Can I do it through CSS or JS? #retirement-services-modal #rs-two-col::shadow(.wrapper) { display: flex; align-items: center; } ...

htmlcssuser-experienceshadow-root

Pictures displaying various shapes in contact with each other

I have a unique challenge involving an image that has been physically cut into puzzle-shaped pieces. Is there a way to align these individual puzzle pieces using only HTML and CSS to create the illusion of a single cohesive image once assembled? It' ...

htmlcss

Unable to retrieve data-id from <td> on click event

Can someone help with an issue I'm having in my code? Here is the snippet where I create a table data element: html += "<td data-id='test' class='journal' style='max-width:200px;'>"+record.source_account_code+"& ...

javascripthtml

How to style FullCalendar to apply background-color for the entire day, not just the event using the 'addEventSource' method

Is it possible to add a background color for the entire day, rather than just for the event itself? The code I've written currently only displays the events with a background color. <script> $(document).ready(function() { $.ajax({ u ...

cssjsoncodeigniterfullcalendar

The button is not centered within the grid container

I need assistance centering the button within a Grid layout using Material-UI <Grid container style={{backgroundColor:'green'}} alignItems="center" justify="center" > <Grid alignItems="center" justify=&q ...

htmlcssmaterial-ui

Integrate, Delay, Experimentalize, and Attach components

This inquiry might lean more towards a general browser/javascript discussion rather than a focused prototype question, but I believe this community possesses a deep understanding of javascript and browsers. With that said, here is my query: If the followi ...

javascripthtmldynamicprototypejs

Top method for centering a flexible SVG vertically once the page width becomes too narrow

Currently, I have two SVG images displayed side by side on a webpage. One SVG needs to maintain a fixed size while the other should scale as needed, and I have achieved this functionality. However, I am facing an issue where I want the two SVGs to align v ...

javascriptjqueryhtmlcss

Steps for dynamically adjusting form fields depending on radio button selection

I am looking to create a dynamic form that changes based on the selection of radio buttons. The form includes textfields Field A, Field B, ..., Field G, along with radio buttons Radio 1 and Radio 2. I need to update the form dynamically depending on which ...

javascriptjqueryhtmlforms

Effortlessly lower several elements simultaneously with SlideDown

My form div contains multiple inner divs: <div class="form" style="display:none"> For example: <div class="row"> <?php echo $form->labelEx($model,'comment'); ?> <?php echo $form->textField($model,'commen ...

jqueryhtmlcss

`Place the image in the middle of the page`

I'm attempting to align the image directly before the text within the same div. I've applied CSS with text-align:center to the div, but it only seems to affect the text. Any suggestions on how to position the image right before the text? http:// ...

htmlcss

The contents of a Javascript array are not appearing within a div element

I have developed a program that reads JSON data related to a concert event. The JSON file consists of an object named global, which includes details about the band name and venue. Additionally, there is a tickets object that contains information on all ava ...

javascriptjqueryhtmlarraysjson

Retrieve the erased document using Google's cache feature

After accidentally overwriting my .php web document file with an old version, I attempted to access the cached copy on Google. The only thing I could find was the HTML scripts, as the PHP coding was not visible. Now I am seeking a method to recover the e ...

phphtml

Verify if there is a value in at least one of the multiple input fields

I have 4 input fields and I need to check if at least one of them has a value. If none of them are filled out, I want the function to stop. Below is the current code snippet I'm using but it's not working as expected because it doesn't ente ...

javascriptjqueryhtml

JavaScript preloader function isn't functioning properly when paired with a button

I'm currently working on developing a preliminary landing page for my game using JavaScript. I have integrated a class that overlays my main content, and added an 'onclick' function named fadeOut() for my button in JavaScript. However, the f ...

javascripthtmlcss

Issue with Bootstrap 4 list items not displaying in block format

Based on the information from , using li tags as block elements should result in a vertical menu. However, with Bootstrap 4, when I use li tags, the menu stays horizontal on toggle for small devices. Is this the expected behavior? <ul class="nav navb ...

htmltwitter-bootstrapcsstwitter-bootstrap-4bootstrap-4