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

Issues with CSS properties not functioning correctly within the class.col function

When attempting to apply specific CSS properties to a particular area (e.g., "Dashboard") by assigning the class name "main" to the div.col function in the HTML, I encountered an issue where the CSS property applied affected the entire page. The following ...

javascripthtmlcssbootstrap-4

Ways to turn off textarea resizing

Is there a way to prevent horizontal resizing on a textarea while still allowing vertical resizing? I find that the textarea often disrupts the design of my contact us page. If anyone has a solution for disabling the horizontal resize feature, please shar ...

htmlcss

Using javascript to transform the entire list item into a clickable link

Currently, I am using PHP in WordPress CMS to populate slides on a slider. Each slide contains a link at the bottom, and my goal is to target each slide (li) so that when clicked anywhere inside it, the user is directed to the URL specified within that par ...

javascriptphpjqueryhtmlcss

What is the best way to add a CSS link if a request is not made using AJAX?

My webpage, 'foo.html', retrieves data from a database using AJAX ('ajax.html?options=option1') to populate a table. The table is styled nicely with CSS that is linked to 'foo.html'. However, I also want the ajax.html page to ...

htmlcssajax

Alignment dilemmas

I'm experimenting with HTML and CSS and have a query concerning the text-align properties. As I work on constructing my personal website, I aim to align text content to start while having it centered in the middle of the page. Currently, I've ma ...

htmlcssflexbox

What causes jQuery's .width() method to switch from returning the CSS-set percentage to the pixel width after a window resize?

After exhaustively console logging my code, I have finally identified the issue: I am attempting to determine the pixel width of some nested divs, and everywhere I look suggests that jQuery's .width() method should solve the problem. The complication ...

javascriptjqueryhtmlcss

Limiting the character input in ion-textarea within Ionic 2: A step-by-step guide

In my Ionic 2 application, I need to limit user comments to less than 500 characters in a text area. What is the best way to implement this restriction? ...

csstypescriptionic-frameworkionic2

Picture not displaying properly in alternative browsers

While working on a simple website using html and css, I encountered an issue where my logo was not displaying for users on different browsers. Here is the image description Below is the HTML code: <section id="header"> <div class=& ...

htmlcssimage

The navigation bar buttons in my IONIC 2 app are unresponsive on both the

In Ionic 2 for Android, I encountered an issue with the title placement. To resolve this, I applied some CSS to center the title and added left and right buttons to the nav bar. However, when I tried to implement onclick functionality for these buttons, no ...

htmlcssangularjsionic2hybrid-mobile-app

Scrolling with animation

While exploring the Snapwiz website, I came across a captivating scroll effect that I would love to implement on my own site. The background picture changes seamlessly as you scroll, with the front image sliding elegantly into view. A similar type of scro ...

javascriptjquerycsshtmljquery-ui

The height of divs spontaneously changes after resizing without any instructions

I am developing a jQuery function to vertically center an element. The function is triggered on load and here is the code: JQuery var $window_height; function Centerize(content) { content.css('margin-top', (($window_height - content.height( ...

javascriptjqueryhtmlcss

After loading ajax content onto the page, the scroll bars fail to appear

I am currently constructing a website that loads page content through ajax. Everything seems to be functioning perfectly, except for a peculiar issue I have encountered in Chrome and Safari. Surprisingly, it is working flawlessly in IE! The problem lies i ...

htmlcssajaxscroll

Adjust the image size without losing sharpness

I'm currently working on a web application for Minecraft and I am looking for a way to resize someone's skin without losing quality. I believe javascript might be the solution to this issue. ...

javascriptcssimageweb-applicationsminecraft

The div element nested within the button is not visible

Fiddle I am trying to create a unique social button design that resembles the custom Google+ sign-in button: However, I encountered an issue where the second div element (to hold the right part of the button) is not displaying as expected: Here is the c ...

javascriptjqueryhtmlcss

Using the CSS property `transform:scale(2,2)` causes an image to suddenly appear in the

Currently utilizing Joomla 3.3, I am seeking to enlarge an image on mouseover. The html code for the image is as follows: <img class="enlarge" style="float: right; margin: 10px; border: 5px solid black;" title="Chapter 1: Physical Differences" src="im ...

htmlcsstransformscalez-order

Tips for ensuring consistent sizing of card items using flexbox CSS

I'm attempting to create a list with consistent item sizes, regardless of the content inside each card. I have experimented with the following CSS: .GridContainer { display: flex; flex-wrap: wrap; justify-content: space-around; align-item ...

htmlcssreactjs

Struggling to use GSAP to control the timeline with my custom functions

I'm attempting to create a greensock animated banner with the ability to switch between different scenes. I've made progress by setting up the timeline for each scene's intro and outro animations using the GreenSock API documentation. Howeve ...

jqueryhtmlcssgsap

Why does the text in a div display in Safari 8.2 and Chrome 39, but not in Firefox 34?

In my HTML document, I have a div tag located within the body like so: <div id="content_text"></div>​ Using javascript, I later set the contents of the div like this: var content_text = document.getElementById("content_text") c ...

javascripthtmlcssfirefox

Tips for embedding Jquery code within Vuejs applications

Trying to code a Vue.js Navbar that changes color when scrolling using Jquery and CSS script. It works, but I encountered an error with Vue.js not supporting the syntax '$' after page refresh, resulting in a "$ not defined" error message. As a ne ...

javascriptjquerycssvue.js

Display a modal when clicking on a bootstrap glyph icon

I tried following a tutorial on how to create a Bootstrap modal at https://www.w3schools.com/bootstrap/bootstrap_modal.asp However, I would like to use a glyph icon in the code snippet like this: <span class="glyphicon glyphicon-pencil" class="btn btn ...

csstwitter-bootstrap