Hovering over graphics for automatic scrolling

I have successfully implemented a hover effect that scrolls down an image inside a div. However, I am facing an issue with making the scroll longer for images of varying lengths by using calc inside the transition property.

Below is the code snippet that I have been working on:

.preview {
  position: relative;
  width: 75%;
  height: 90vh;
  overflow: hidden;
  border: 1px solid red;
  background-color: transparent;
}

.previewimg {
  width: 100%;
  height: 100%;
  top: 0;
  background-image: url(https://www.n2odesigns.com/wp-
 content/uploads/Projema-Website-Preview-2016.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position-y: 0;
  transition: all calc(0.02s * height) ease-in-out;
}

.previewimg:hover {
  background-position-y: 100%;
  height: 100%;
  transition: all calc(0.02s * height) ease-in-out;
}

If there are alternative methods to achieve this scrolling effect, I would be open to exploring them as well.

csshovercss-transitionscss-animationstransition

Answer №1

To achieve this effect, you must ensure that the image is not set as a background image but as an actual image. Utilize the following code to implement transition duration based on height functionality:

$('.previewimg').css("transition", "transform " + 0.02 * $('.previewimg').height() + "s ease");
.preview {
  position: relative;
  width: 75%;
  height: 300px;
  overflow: hidden;
  border: 1px solid red;
  background-color: transparent;
}

.preview .previewimg {
  width: 100%;
  height: auto;
  transform: translateY(0px); 
}

.preview:hover .previewimg {
  transform: translateY(calc(-100% + 300px)); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preview">
  <img class="previewimg" src="https://www.n2odesigns.com/wp-content/uploads/Projema-Website-Preview-2016.jpg"/>
</div>

Answer №2

If you are looking to incorporate JavaScript into your solution, here is a snippet that can be seamlessly added without altering your existing HTML/CSS setup:

function retrieveImageHeight(url) {
  console.log(url);
  var image = new Image();
  image.src = url;
  return 0.002 * parseInt(image.height);
}
var element = $(".previewimg");
var transition = "all " + retrieveImageHeight(element.css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1')) + "s ease-in-out";
console.log(transition);
element.css('transition', transition);
.preview {
  position: relative;
  width: 75%;
  height: 90vh;
  overflow: hidden;
  border: 1px solid red;
  background-color: transparent;
}

.previewimg {
  width: 100%;
  height: 100%;
  top: 0;
  background-image: url(https://www.n2odesigns.com/wp-content/uploads/Projema-Website-Preview-2016.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position-y: 0;
}

.previewimg:hover {
  background-position-y: 100%;
  height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preview">
  <div class="previewimg"></div>
</div>

Answer №3

Instead of using JavaScript, you can achieve this effect with codepen: codepen.io, or by using the following CSS code:

.preview {
   width:300px;
   height:300px;
   overflow: hidden;
}
.previewimg{
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   background-size: cover;
   background-image: url(https://source.unsplash.com/500x1500/);
   transition: background-position 2s ease-out;
}
 .preview:hover .previewimg{
   background-position: 0 100%;
}

Answer №4

By adding other body elements with specified style classes, you can create boxes that change the logo when hovered over.

*{
    box-sizing: border-box;
}
.logoses{ 
    text-align: center; 
    list-style: none; 
}
.logoses .logo{
    width: 178px;
    height: 75px;
    background:
    url('G:/touqeer/amp-landing-pages/assets/images/clients_logo.png') center top no-repeat;
    margin: 0 2px 8px;
    border: 1px solid #e0e0e0;
    display: inline-block;
    vertical-align: middle;
    transition: all .4s ease-in;
    }
#amara{
    background-position: 5px -125px;
}
#amara:hover{
    background-position: 5px 0px;
}
#ge{
    background-position: -1486px -125px;  
}
#ge:hover{
    background-position: -1486px -2px;
}
#nuance{
    background-position: -489px -124px;  
}
#nuance:hover{
    background-position: -489px -1px;
}
#gilson{
    background-position: -329px -123px;
}
#gilson:hover{
    background-position: -329px 0px;
}
#pcs_wireless{
    background-position:  -824px -125px; 
}
#pcs_wireless:hover{
    background-position:  -824px -2px;
}
#herbalife{
    background-position: -161px -123px;
}
#herbalife:hover{
    background-position:-161px 0px;
}
#pcf{
    background-position: -659px -125px;  
}
#pcf:hover{
    background-position: -659px -2px;
}
#seimens{
    background-position: -991px -125px;
}
#seimens:hover{
    background-position:-991px -2px;
}
#melesta_games{
    background-position:  -1156px -124px;  
}
#melesta_games:hover{
    background-position:  -1156px 1px;
}
#samsung{
    background-position: -1324px -123px;
}
#samsung:hover{
    background-position: -1324px 0px;
}
.center_pd{
    padding: 75px 0px;
}
.text_bottom{
    margin: 0px 0px 60px 0px;
}
.center_text{
    text-align: center;
}
.header{
    margin: 0px 0px 20px 0px;
}
h2{
    font-size: 30px ;
    font-weight: 400;
    color: #393939;
}
.prg{
    font-size: 16px;
    color: #333;
    font-family: Open Sans;
}

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

Two tables arranged in a nested grid layout

Picture a bootstrap grid setup with an 8:4 layout. <div class="container"> <div class="row"> <div class="col-md-8"> </div> <div class="col-md-4"> </div> </div> </div> ...

htmlcssbootstrap-4grid-layout

Avoiding Ajax overload/server collapse in an Arduino/ESP8266 setting

I've recently been delving into Arduino programming to host an HTML/CSS/JavaScript webpage on an Adafruit HUZZAH ESP8266 breakout board. Please pardon any unconventional methods I may be using. My approach involves utilizing Ajax to update pressure g ...

javascriptcssajaxarduinoesp8266

What is the best way to ensure my hover caption spans the entire size of the image?

I'm currently working on creating a hover caption that adjusts itself to fit the full width and height of an image even when it is resized. I attempted to implement a jQuery solution that I came across, but unfortunately, I am struggling to get it to ...

jqueryhtmlcsshovercaption

How to transform the bootstrap 4 hamburger icon into a three dots menu icon using css only

The standard bootstrap 4 navigation bar button showcases a classic hamburger icon. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="T ...

cssbootstrap-4

What is the process behind the creation of the class or id fields in HTML for Gmail and Quora? How are these

When using Gmail: <tr class="zA yO" id=":1t4"> While on Quora: <span id="ld_zpQ1Cb_27965"> What is the purpose behind this and what specific tool do they employ to achieve it? ...

htmlcssgmail

Slower CSS rendering as Javascript finishes its tasks

I am currently dealing with a jQuery plugin that is quite large and complex, but I will not be sharing it here to keep things simple. The issue I am facing is relatively straightforward, so I will focus on the essential code snippets: There is a click eve ...

javascriptjquerycssclickpseudo-element

creating unique styles for your Ionic app with Angular using JSON

Having trouble changing the item color. Does anyone know why my CSS isn't working, or if I'm missing something? <ion-view title="Add order to a table"> <ion-content class="has-header has-subheader"> <ion-list> ...

cssangularjsjsoncordovaionic-framework

The function of style.marginRight differs from that of style.marginLeft

One function aligns content to the left while the other doesn't align it to the right function openNavLeft() { document.getElementById("mySidenavLeft").style.width = "100vw"; document.getElementById("main").style.marginLeft = "100vw"; } function ...

javascriptjqueryhtmlcssbootstrap-4

Centering bootstrap columns in a WordPress template

I am facing an issue with aligning columns in a bootstrap section within a Wordpress template that I am working on. The problem is that the columns on the second line of the row are not centered. Currently, the layout displays 4 columns in the top row and ...

htmlcssbootstrap-4

A specific class has no border on its left side

Is there a way to use CSS to disable the left border to the right of a cell with a specific class? In the scenario shown in this image, the right border appears double due to the combination of the "selected" class border and the default gray border. I wo ...

cssborder

Overflow error in Rsuite table row cannot be displayed

Please see the image above Take a look at my picture. I am facing a similar issue. I am struggling to display my error tooltip over my table row. Has anyone else encountered this problem before? Any suggestions for me? I have attempted to set the overflow ...

cssreactjsrsuite

Using loops in Sass mixins causes errors

I have been developing a SASS code to generate CSS output that has the following format. background: -webkit-linear-gradient(top, 50%); background: -moz-linear-gradient(top, 50%); background: linear-gradient(top, 50%); This is the SASS mixin code I cr ...

csssasscompass-sassmixins

Eliminate the approximately 20 pixel space on the right side of the HTML email when viewed on iOS

Recently, I've been focused on developing a contact form for my portfolio website. Successfully sending HTML emails from the server to my email address has been a highlight. Since I mainly access my emails on my iPod Touch, I tailored the mail templat ...

iphoneioscss

Choose a child using react material ui's makeStyles

Currently utilizing React and Material UI, I am attempting to use the nth-child selector with the MUI makeStyle function. However, it is not working as expected. Here are some screenshots for reference: https://i.sstatic.net/5dVhV.png https://i.sstatic.ne ...

cssreactjsmaterial-ui

What is the best method to deallocate and remove the background-color property of CSS once it has been defined?

There is a perplexing issue that I am unable to resolve. The "Shop" section on this page has an intriguing translucent blue-green background: This background is set using the ID "#left-area". Interestingly, on another page, which can be found at , the sam ...

css

creating a div that functions similarly to a radio button

Is it possible to create a div that mimics the behavior of a radio button? I'm looking for a solution that doesn't involve jquery, as many people have recommended. After doing some research, I found a few potential options. In the past, I'v ...

javascripthtmlcss

Ways to conceal a text-filled div behind an image using 3D transformation

I've been working on creating three images with a fun 'flipcard' effect for the past day and a half, and I believe I'm getting closer to achieving my goal. However, there is one issue remaining, as you can see in the codepen. When the ...

htmlcsscss-transitions

Tips for eliminating the pesky "ghost" line that appears in your coded HTML email

Check out this Sample Code: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <title></title> & ...

htmlcssemailhtml-tablehtml-email

Video embedded in a plain CSS popup that automatically starts playing even before the popup is triggered

My goal is to incorporate a video into a minimalist CSS modal window, following the guidance provided here. While the setup works well overall, I encounter a issue where the video starts playing before the modal window is opened (I need to maintain the "au ...

htmlcssmodal-dialog

Transitioning images while hovering over a different element

Need some inspiration for a school project? I'm stuck on how to create a smooth image fade effect in CSS when hovering over another element (like an anchor link) on the same page. I've been attempting to use the :target and not(:target) selector ...

htmlcss