Reveal concealed material by hovering over a div

Question

Reveal concealed material by hovering over a div

Is there a way for me to replicate the animation found on this website:

When hovering over the blue and green circles, they exhibit a captivating animation. I would like to achieve a similar effect with my design:

What tools or techniques should I utilize? Are there any tutorials or guides available that can help me understand and successfully implement this feature on my own site?

html css animation

Answer 1

Answer №1

I attempted to replicate that effect by implementing the following code:Here's the DEMO on JsFiddle.

function js1(x) {
  x.style.animation = "anime 5s";
}

function js2(x) {
  x.style.animation = "anime1 5s";
}

#first {
  position: absolute;
  float: left;
  width: 100px;
  height: 100px;
  background-color: black;
  top: 200px
}
#sec {
  position: relative;
  float: right;
  width: 100px;
  height: 100px;
  background-color: black;
  top: 200px
}
@Keyframes anime {
  from {
    left: 0;
  }
  to {
    left: -400px;
  }
}
@Keyframes anime1 {
  from {
    left: 0;
  }
  to {
    left: 400px;
  }
}

<div id="first" onmouseenter="js1(this)"></div>
<div id="sec" onmouseenter="js2(this)"></div>

Feel free to utilize the code. The remaining challenge is handling the scroll behavior (specifically, making the page scroll to the left - a feature I'm still figuring out).

To achieve the hover functionality, I employed javascript and onmouseenter. To learn more about onmouseenter, click here, and for @Keyframes, visit here.

Answer 2

I attempted to replicate that effect by implementing the following code:Here's the DEMO on JsFiddle.

function js1(x) {
  x.style.animation = "anime 5s";
}

function js2(x) {
  x.style.animation = "anime1 5s";
}

#first {
  position: absolute;
  float: left;
  width: 100px;
  height: 100px;
  background-color: black;
  top: 200px
}
#sec {
  position: relative;
  float: right;
  width: 100px;
  height: 100px;
  background-color: black;
  top: 200px
}
@Keyframes anime {
  from {
    left: 0;
  }
  to {
    left: -400px;
  }
}
@Keyframes anime1 {
  from {
    left: 0;
  }
  to {
    left: 400px;
  }
}

<div id="first" onmouseenter="js1(this)"></div>
<div id="sec" onmouseenter="js2(this)"></div>

Feel free to utilize the code. The remaining challenge is handling the scroll behavior (specifically, making the page scroll to the left - a feature I'm still figuring out).

To achieve the hover functionality, I employed javascript and onmouseenter. To learn more about onmouseenter, click here, and for @Keyframes, visit here.

Reveal concealed material by hovering over a div

Answer №1

Similar questions

Having trouble retrieving the innerHTML of a span tag in a JavaScript function

Centered on the page vertically, two distinct sentences gracefully align without overlapping, effortlessly adjusting to different screen sizes

Opacity transition in CSS does not function properly on a sibling selector when hovering over an element

What is preventing me from adding a margin to the div directly? Why must I apply a margin to the child in order to affect the div's margin

Can the HTML attributes produced by AngularJS be concealed from view?

Applying CSS dynamically to a mat-cell in Angular 6

I incorporated a YouTube video using the iframe tag, but encountered an issue where the page would not scroll up or down when the mouse cursor was positioned on the iframe

Change the position of the specified footer on the one-page website

Creating a Full-Width Form Using Bootstrap

What is the best way to show the title when a user hovers over a word?

Utilize a JavaScript variable within HTML within the confines of an if statement

JavaScript still mentions a class that no longer exists

Implementing a Fixed Navbar in VueJS on Scroll

Changing colors in the rows of a table

CSS - Combining underline, striikethrough, and overline effects with customized styles and colors within a single element

The .media object in Bootstrap 3 does not experience overflow issues with .dropdown elements

Applying CSS to Dynamic JavaScript Elements: A Guide to Styling Without In-line Code

Adding an image to a two-column layout with text

Tips for merging two classes in CSS

Achieving proper layout in Material-UI Autocomplete by splitting long words