Bring your images to life with a captivating 3D hover effect

I am looking to achieve a similar effect using JavaScript instead of just pure CSS like the example provided. I'd prefer not to use SCSS either, just sticking to CSS would be great. Please check out this CodePen for reference.

.picture-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  justify-self: center;
  align-items: center;

  width: 40%;
  height: 100vh;
}
.picture-frame {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;

  padding: 5%;

  border: solid 1px #000;
}
.picture {
  z-index: 1;
  width: 100%;
  height: 100%;
}
<html>
<div class="picture-container first-picture horizontal-small">
          <div class="picture-frame">
            <img
              id="secondPic"
              src="https://picsum.photos/200/300"
              alt="picture of a brick house"
              class="picture middle-right"
            />
         </div>
</div>
<html>

Additionally, I will be implementing Vue.js into this project. I'm curious to see how that might affect the implementation of this effect.

javascripthtmlcssvue.jshover

Answer №1

One way to achieve a 3D effect is by using the transform styling property. See my code example below:

var card = document.getElementsByClassName('card');

document.addEventListener("mousemove", function(e) {  
  var ax = -(window.innerWidth/2- e.pageX)/20;
  var ay = (window.innerHeight/2- e.pageY)/10;
  document.getElementById("cards").style.transform = "rotateY("+ax+"deg) rotateX("+ay+"deg)"; 
});
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700);
 body {
     background: #edf2f4;
     perspective: 1000px;
     transform-style: preserve-3d;
     display: flex;
     height: 100vh;
     font-family: "Playfair Display", georgia, serif;
}
 .card {
     pointer-events: none;
     transform: translateZ(0);
     padding: 30px;
     background: white;
     border-radius: 5px;
     width: 400px;
     height: 200px;
     margin: auto;
     transform-style: preserve-3d;
     backface-visibility: hidden;
     display: flex;
     box-shadow: 0 0 5px rgba(0, 0, 0, .1);
     position: relative;
}
 .card:after {
     content: " ";
     position: absolute;
     width: 100%;
     height: 10px;
     border-radius: 50%;
     left: 0;
     bottom: -50px;
     box-shadow: 0 30px 20px rgba(0, 0, 0, .3);
}
 .card .card-content {
     margin: auto;
     text-align: center;
     transform-style: preserve-3d;
}
 .card h1 {
     transform: translateZ(100px);
}
<div id="cards" class="card">
  <div class="card-content">
    <h1>Just hover around</h1>
  </div>
</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

Tips for maintaining i18n locale slugs and ensuring i18n consistency when reloading in Next.js

I'm currently utilizing next-translate. The default recognition of my routes is as follows: /about <--- /de/about /es/about However, I would like to set a specific locale for all paths: /en/about <--- /de/about /es/about Below is ...

javascriptinternationalizationnext.js

What are some ways to leverage a promise-returning callback function?

Here is a function that I have: export const paramsFactory = (params: paramsType) => { return ... } In a different component, the same function also contains await getPageInfo({ page: 1 }) after the return .... To make this work, I need to pass a cal ...

typescriptvue.js

The Keydown Event in Asp.net GridView may sometimes fail to be triggered

While working within a gridview on Internet Explorer, users can click on cells in one column to reveal a hidden textbox. After entering text into the textbox, users are instructed to press the Tab key to save changes. To accomplish this, a Javascript funct ...

c#javascriptasp.netgridview

Making asynchronous requests using AJAX

$.ajax({ async:false, url: "ajax/stop_billed_reservation_delete.php", type: "POST", dataType : "json", data : { "rid" : <?php echo $_GET['reservationId']; ?> }, success: function(result){ ...

javascriptphpjqueryajaxasynchronous

When clicking on Submit, the code does not acknowledge the Verify Function

I am currently facing an issue with implementing the JQuery Ui function "Verify();" to ensure that the name, age, country, and date fields are completed before allowing form submission. Even though I have written the verify function to execute when the us ...

htmljquery-uisubmitverifyrequired-field

Stuffing a container with an image without considering the proportions

I am experimenting with filling a parent <div> with an image without concern for proportions. Despite knowing that it may not look great at all sizes, I just want to test its feasibility. Currently, the image is scaling instead of stretching to fit m ...

javascriptjqueryhtmlcssimage

Select component with nested checkboxes for multilevel dropdown

I am interested in developing nested dropdowns with checkboxes, similar to the example shown in this image: Image 1 Is there a way to achieve this functionality using React? I have not been able to find any specific library that allows for this implement ...

javascriptreactjsmaterial-ui

Determine the height of an image using JavaScript

How can I retrieve the height of an image in a JavaScript function? When I use the code: var image_height = $(image).height(); The value of image_height is 0, even though my image definitely has non-zero height. Is there a different method to accurately ...

javascriptjqueryheight

Module '../../third_party/github.com/chalk/supports-color' not found in the directory

Within my tutoring-frontend-main project folder There is a file named package.json { "name": "app-frontend", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "n ...

javascriptnode.jsreactjsangularangularjs

Unable to utilize angular-local-storage

Here is the code snippet I'm working with: angular.module('MyModule').controller('MyController', ['$scope', '$stateParams','$location', '$http','LocalStorageModule', function($s ...

javascriptangularjsmodulecontrollerlocal-storage

Receiving an unexpected error message related to Vuex in the watcher function, even though I am not utilizing Vuex in my N

My goal is to update an object property in an array [{ text: 'some text' value: 'some value, active: false }, etc..] from false to true when I click on a checkbox that is connected to a v-model: <v-col v-for="(item, i) in searchModul ...

vue.jsnuxt.jsvuetify.jsvuex

Modify the placeholder color for a disabled Input element to match the overall Mui theme design

I am struggling to change the color of the placeholder text in a disabled input field within my app's theme. Despite attempting to target the MuiFormControl, MuiInputBase, and MuiInput components in my theme.tsx file on CodeSandbox, I have not been su ...

javascripthtmlcssmaterial-uiplaceholder

Including a hyperlink button within a Kendo Grid cell that is editable

I have a grid featuring a column for editable phone numbers. I want to include a small icon that users can click on to trigger a "tel: link" which will prompt their phone hardware to act accordingly. For a demo, check out this link -> Objective: Clic ...

cssgridkendo-grid

Ways to trigger a function once all elements have been successfully mounted

Currently, I am incorporating VueJS with the Vue Router and a JavaScript uniform module to enhance the appearance of select boxes, checkboxes, and other form elements by wrapping them in a new element for better styling options. How can I efficiently appl ...

javascriptvue.jsvue-router

Exploring the art of styling in Angular6

I am looking to change the text color when a specific ID is clicked <nav class="navbar "> <ul class="navbar-nav"> <li *ngFor="let item of items"> <a class="nav-link" >{{item.title}}</a> ...

cssangularhtml

How to locate the index.js file within my application using Node.js?

Directory Structure bin - main.js lib - javascript files... models - javascript files... node_modules - folders and files public - index.html route - javascript files... index.js package.json I am using Express and angular.js. The ser ...

javascriptangularjsnode.jsexpress

Create a variety of charts using the same data object in Highcharts

Is it possible to display two (or three) different charts on the same page using Highcharts without creating separate div elements and only utilizing one object? I have created a screenshot to illustrate my question: You can view the code example on JSFi ...

javascripthtmlhighcharts

I am struggling to link my JS application with a PHP file as it is showing "PHP file not found

I am facing an issue with my JS application. I am unable to send data from jQuery to a PHP file, as I encountered this error message: POST https://magazyn.rob-tech.pl/savesettings.php 404 The app is running on PORT=8080 npm run start and the package.json ...

javascriptphphtmljquerynpm

What steps can I take to troubleshoot issues when creating a React app?

While attempting to set up a react application using npx create-react-app projectreact, I encountered the following error message: PS C:\Users\ahnaa\OneDrive\Documents\Web Developent\Reaact JS> npx create-react-app project ...

javascriptnode.jsreactjsnpm

Retrieving vector layers by class and attempting to refresh them in OpenLayers version 2.14 is unsuccessful

First, the process involves accessing all Vector layers, checking if they are visible and retrieving their names. After that, we need to clear any applied filters on those layers and refresh them. Below is a snippet of the code: var mLayers = map.getLaye ...

javascriptopenlayers