What is the method for automatically scrolling down while hovering over an image?

How can I make it so that when an image is hovered over, it automatically scrolls to the bottom of the image?

I have a couple of questions:

  1. How can I ensure the image scrolls to the end when hovered over? Currently, when I hover over the image, it doesn't scroll to the bottom.

  2. Is there a way to control the speed of the scroll when hovering over an image?

Here is my code:

body {
  margin: 2px auto;
  width: 500px;
}

.pic {
  width: 48%;
  height: 200px;
  overflow: hidden;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.pic:before {
  width: 100%;
  height: 200px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
}

.pic:after {
  color: #fff;
  font-size: 18px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -20px -25px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 10px;
}

img {
  max-width: 100%;
  cusor: pointer;
}

.pic:hover img {
  animation: moveSlideshow 3s linear;
}

@keyframes moveSlideshow {
  100% {
    transform: translateY(-60%);
  }
}

.pic:hover .pic:after {
  opacity: 0;
}
<div class="pic"><img src="http://scr.templatemonster.com/51600/51651-big.jpg" alt="" /></div>


<div class="pic"><img src="http://www.cssauthor.com/wp-content/uploads/2014/06/Good-to-Go-single-page-PSD-template1.jpg" alt="" /></div>

Answer №1

This method works perfectly. By using a calculation based on the width of the image, the height of the div is adjusted accordingly, allowing for seamless scrolling to the bottom of the div.

Styling in CSS:

.pic:hover img {
  animation: moveSlideshow 3s linear;
  animation-fill-mode: forwards;
}

View the code snippet in JSFiddle: here

Answer №2

If you want to have control over the animation speed, you can utilize the animation-duration property and adjust it accordingly (for example, I set it to 0.6 seconds in the code snippet). Another way to maintain the animation state is by using the animation-fill-mode: forwards; property.

body {
  margin: 2px auto;
  width: 500px;
}

.pic {
  width: 48%;
  height: 200px;
  overflow: hidden;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.pic:before {
  width: 100%;
  height: 200px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
}

.pic:after {
  color: #fff;
  font-size: 18px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -20px -25px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 10px;
}

img {
  max-width: 100%;
  cusor: pointer;
}

.pic:hover img {
  animation: moveSlideshow .6s linear forwards;
}

@keyframes moveSlideshow {
  100% {
    transform: translateY(-60%);
  }
}

.pic:hover .pic:after {
  opacity: 0;
}
<div class="pic"><img src="http://scr.templatemonster.com/51600/51651-big.jpg" alt="" /></div>

<div class="pic"><img src="http://www.cssauthor.com/wp-content/uploads/2014/06/Good-to-Go-single-page-PSD-template1.jpg" alt="" /></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

Utilizing AngularJS $anchorScroll for navigating to an anchor tag on a different page

On my AngularJS Home Page, I am trying to scroll to an anchor tag on another page. Both pages are loaded as partial html files into the ng-view component based on the URL. When I start the server, the home page loads and then I need to navigate to the FAQ ...

Once the page is refreshed, the checkbox should remain in its current state and

I have a challenge with disabling all checkboxes on my page using Angular-Js and JQuery. After clicking on a checkbox, I want to disable all checkboxes but preserve their state after reloading the page. Here is an example of the code snippet: $('# ...

Looking for assistance in identifying the cause of CSS malfunction in Internet Explorer

I am encountering some challenges with the CSS on my website. I developed the site without considering Internet Explorer, and now that I am trying to address IE bugs, it feels like a daunting task. How do you approach debugging in situations like these? ...

Dynamic height adjustment for Bootstrap right column

I am struggling to create a layout with a right column using bootstrap. I can't figure out how to achieve the desired arrangement shown in this image. https://i.stack.imgur.com/VaIWD.png I have attempted various methods but the right column does not ...

Sending a unicode PHP variable to JavaScript is a breeze

I am attempting to transfer the titles and excerpts of Persian Wordpress posts to JavaScript. Below is the code in a .php script file: function change(){ document.getElementById("link").innerHTML = '<a href="$links[2]">$titles[2]< ...

Utilize Wordpress TinyMCE to apply the underline decoration using the "U" tag instead of the style

Is there a way to modify the function of the button in the WordPress content textarea of TinyMCE? Specifically, I am referring to the "u" button for underline formatting. <span style="text-decoration-line: underline;">text underlined</span> I ...

The floating property doesn't appear to function properly in Internet Explorer versions 6 through 8 when

I've noticed that my website in Dutch looks great on Firefox and Safari (both Mac and PC), as well as Chrome (Mac tested, PC untested), but for some reason it's not displaying correctly on IE 6-8 (which is unavailable on Mac). I suspect there may ...

Why do I keep getting an ExpressionChangedAfterItHasBeenChecked error after trying to update a random color in an

Is there a way to assign a random color from an array without causing the error message: "ExpressionChangedAfterItHasBeenChecked"? Even though the color of the chip changes quickly before the message appears, it seems like it's working. How can I reso ...

Updating CSS for dropdown menu in Fluent/Fabric design

I am working with a dropdown component from Fluent UI and I am trying to customize the CSS of the dropdown options. Although I can add classes using className to the dropdown itself, I am facing difficulty in styling the dropdown options directly due to th ...

Tips for replacing spaces with &nbsp; in a string using ReactJS and displaying it in HTML

<div className="mt-2 font-sidebar capitalize"> {item.title} </div> item.title can vary and be any string retrieved from the backend, such as "all products", "most liked", "featured items", etc. I am looking for a solution to subst ...

Switching visual representation that appears upon clicking the dropdown menu

Issue with Duplicating Dropdown and Image Change const image = document.querySelector('.item__img'); const checkbox = document.querySelectorAll('.imgOption'); function handleChange() { let imgsrc = this.getAttribute("data-value ...

The content within a div block is having trouble aligning vertically

I need help with centering the content inside my fixed-top navigation bar vertically. I am using bootstrap to design my page, and the navigation bar consists of an image as the nav header and a container with links. The container surrounding these element ...

Having trouble with executing functions on an express js Route?

I'm currently exploring Node and Express, and I'm encountering an issue when trying to pass a function instead of plain text on my route. It seems that the documentation only mentions using res.send() method with text. Even when attempting to use ...

Creating a blueprint for my AJAX setup to effectively incorporate a callback function

I'm currently working with AJAX to fetch timezone information in a function, but I need it to return the result. I've come to realize that AJAX is asynchronous, so I require a callback function. Although I have seen examples, I am struggling to u ...

Retrieving API Data in React Using the MERN Stack

Can anyone help me understand why I'm logging an empty array [] in my console even though I'm getting results from my API? This is my Node.js code: app.get("/todos", async (req, res) => { const todos = await todo.find() res.json(todos ...

What is the best way to set up a side-opening feature in the UI design?

I am having trouble with the Amoclan shape transitioning to the next side. I need the transition to occur exactly as specified in the documentation, but for some reason it is still moving on to the next side. <html> <head> <script src=" ...

Incorporating Axios data into a React component

I am seeking assistance with React development as I am facing challenges in mapping the data retrieved from a simple API call using Axios. This problem has been troubling me for a few days now. Below, you will find my App.js App Component along with the AP ...

What steps can be taken to address an undefined error before the execution of useEffect?

Today I encountered a small issue with my online player. It's fetching songs from the database using useEffect and saving them in state like this: const [songs, setSongs] = useState([]); const [currentSong, setCurrentSong] = useState(songs[0]); a ...

Instructions on designing a three-column layout for six separate div elements

i am having trouble organizing 6 div elements into 3 columns per row. Currently, I have them arranged in two rows, but the issue arises when a column's h2 element is long and it pushes down the column below, creating a large space in the second row. A ...

Cross-Origin Request Sharing (CORS) problem encountered while making an API call with

My current challenge involves calling an API that returns data in XML format as a response. While testing the .htm file on my local machine, I encountered the following error. https://i.stack.imgur.com/FsvZ0.png Similarly, running it from the codepen.io ...