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?

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.

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

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

I'm currently working on creating an email message that will have pre-filled text from an asp:Literal when a user clicks a link. The HTML code for this is structured like this: <tr> <td> <img src="../../images/Question.gif" ...

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

I had no trouble centering horizontally but I'm struggling with vertical alignment. I want these two sentences to be positioned in the middle of the page, regardless of device size. I attempted using vertical-align without success and then tried posit ...

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

I have created a responsive menu where the list items after the 4th element are set to display:none; opacity:0 on mobile devices. The 4th element is an icon and when you hover over it, the hidden menu items appear as a block list below using li:nth-child( ...

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

I've encountered a strange situation with 2 fixes that seem rather unusual to me. 1: By removing the #MARGIN-30 tag and deleting the #Nav-bar tag under margin-3, the issue resolves itself when I reapply those tags. 2: Another fix is achieved by addi ...

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

Is there a way to hide the Angular-generated attributes such as ng-app and ng-init in the HTML code that is output? I want to present a cleaner version of the HTML to the user. Currently, I am using ng-init to populate data received from the server, but ...

Applying CSS dynamically to a mat-cell in Angular 6

In my material table, I need to apply specific CSS classes based on the content of the cell. https://i.sstatic.net/YN6EO.png These are the CSS classes that I am using .status-code{ flex: 0 0 10% !important; width: 10% !important; } .status-code- ...

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

How would you like your HTML code to function? When the cursor is on the iframe, do you want it to play a video? Also, should the parent page scroll when you scroll? <section class="section section-padding"> <div class="container"> ...

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

I am currently in the process of creating a single-page layout website. What I want is to have the elements with the class "footer-bar" positioned absolutely on each page, but on the #Home Page, it should be position relatively. Does anyone have any sugge ...

Creating a Full-Width Form Using Bootstrap

I need help aligning 3 form boxes side by side with a total width of 100%. I want to be able to specify the width of each box, or have the last two boxes set to their default size while the first box fills up the remaining space. Here is my current code: ...

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

Below is an illustration of the code: <p>Bob's <dfn title="Dog">canine</dfn> mother and <dfn title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn title="A mutation that combines ...

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

On my HTML page, I am dynamically displaying a list of properties and then counting how many are displayed in each div. <script type="text/javascript> var numItems = $('.countdiv').length; </script> The class name for each property ...

JavaScript still mentions a class that no longer exists

One of my elements has a class of .collapsed. When this element is clicked, a jQuery function is triggered to remove the .collapsed class and add the .expanded class instead. Even after the .collapsed class is removed, the function I have created continue ...

Implementing a Fixed Navbar in VueJS on Scroll

I am seeking help with creating a Fixed Navbar on Scrolling using Vue.js. I initially wrote some jQuery code for this functionality, but now I want to transition it to Vue.js. The updated code can be found in a file named navbar.js. Previous jQuery CODE ...

Changing colors in the rows of a table

Here is a fiddle I created to demonstrate my issue. https://jsfiddle.net/7w3c384f/8/ In the fiddle, you can see that my numbered list has alternating colors achieved through the following jQuery code: $(document).ready(function(){ $("tr:even").css("ba ...

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

I am trying to achieve a unique design with only one <span> that has three different text decorations (underline, strikethrough, and overline) like this: (This is just an example, I need it to be changeable) https://i.stack.imgur.com/61ZnQ.png Ho ...

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

Dropdown menu not displaying fully https://i.sstatic.net/G38cL.png I have a dropdown menu but it seems to cut off halfway through displaying its content. <div class="media-body"> <h4 class="panel-heading" style="margin:0;"> <div ...

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

I'm a beginner in web development and I've been experimenting with applying styles to dynamically generated div elements using JavaScript. So far, I've only been able to manually add inline styling through this function: function applyStyle( ...

Adding an image to a two-column layout with text

Seeking assistance with my website creation using HTML, CSS, and jQuery. Currently, I have a text layout formatted in two columns with an image placed before the text as shown below: <div> <div style="float:right"> <img src="ima ...

Tips for merging two classes in CSS

Within my code, I have two classes named classA and classB. I am looking to have classB inherit the style of classA while still only using classB. .classA{ width:100px;} .classB{ height:100px;} <div class="classB"></div> ...

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

Exploring the Material-UI autocomplete feature for the first time has brought some challenges my way. I am working with usernames, which have a specific length limit but could exceed the space available in the autocomplete view. https://i.sstatic.net/O8t1 ...