How to create a looping animation effect for a div using CSS on hover

Using Bootstrap framework with Wordpress site

.test {
  position: absolute;
  z-index: 9;
  left: 50%;
  height: 10em;
  width: 10em;
  margin-left: -5em;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.linkage:hover + .test {
  opacity: 1;
}
<div class="row">
  <div class="col-md-12 indx-img" style="background-image:url('...');">
  
     <a href="<?php the_permalink(); ?>" class="linkage">Link</a>
    
     <div class="test"> Test </div>
  
  </div>
</div>

Currently, when hovering over the 'linkage' link, the 'test' div appears vertically and horizontally centered with opacity 1.

I am looking to add an animation effect to the 'test' div as it fades in on hover. One idea is to use scale transformation where the div scales down to its original size on hover, then scales up on fade out. Suggestions for cooler effects are welcome!

javascriptjqueryhtmlcss

Answer №1

If you're in search of a code snippet that implements a transition (and not an animation), then look no further. When hovering over the link, the element with the class name .test will scale up to twice its original size along both the X and Y axes. Upon mouse out, it will smoothly return to its normal size.

.test {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 50%;  
  height: 10em;
  width: 10em;
  margin-left: -5em;
  background-size: cover;
  background: url(http://lorempixel.com/500/500);  
  opacity: 0;
  transition: all 0.5s ease;  

  transform-origin: 50% 50%;
  transform: translateY(-50%) scaleX(2) scaleY(2);
}
.linkage:hover + .test {
  opacity: 1;
  transform: translateY(-50%) scaleX(1) scaleY(1); 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="row">
  <div class="col-md-12 indx-img" style="background-image:url('...');"> 
    <a href="#" class="linkage">Link</a>
    <div class="test">Test</div>
  </div>
</div>

You could also achieve a similar effect using matrix transforms. The equivalent of 

translateY(-50%) scaleX(2) scaleY(2)
would be matrix(2, 0, 0, 2, 0, -101), while 
translateY(-50%) scaleX(1) scaleY(1)
corresponds to matrix(1, 0, 0, 1, 0, -101).

Answer №2

It's impossible for this statement to be accurate:

.linkage:hover + .test {
  opacity: 1;
}

This is because the element with a class of "linkage" (whether hovered or not) is not a sibling of the element with a class of "test."

The element with a class of "test" is positioned absolutely, but there is no parent element that has a position other than static. Did you intend for it to be positioned absolutely relative to the body? You are using left/margin to center horizontally and translateY to center vertically, but you have not specified a top value. Perhaps consider consolidating your positioning methods into one?

top:50%; left:50%; transform: translateX(-50%) translateY(-50%);

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

AJAX Simplemodal

I'm currently working on incorporating Simplemodal onto my website. While it's easy to create simple text boxes, I'm struggling to find a way to display another page using AJAX. My knowledge of jQuery is limited and there seems to be no docu ...

jqueryajaxsimplemodal

The layout generated by Metronic does not display the CSS styles

I've been working on creating a Metronic layout using the layout builder, but I'm running into an issue. Whenever I try to open index.html, all I see is this: screenshot It appears that the CSS styles are not loading properly. Interestingly, wh ...

htmlbootstrap-4metronic

During the second request, Ajax is unable to retrieve any data

Currently, I am working on a calendar project where I utilize an ajax request upon page load to fetch data from the rails database. Initially, the ajax call successfully retrieves the object during the page load event. However, when I attempt to retrieve ...

javascriptjqueryruby-on-railsajax

Issue with event delegation when using if-else conditions is not being resolved

I have set up an event listener on an HTML container, and when the user clicks on the play again button, the code inside the 'if' statement should be executed. However, nothing happens when clicking on the play again button and no logs are output ...

javascript

What is the best way to manage a vuex dispatch response?

Despite feeling like the answer is right in front of me, I'm waving the white flag and seeking suggestions. The challenge lies in my login form that submits to an AWS API and reacts to the result. The trouble starts when the handleSubmit method is tr ...

javascriptvue.jsvuexaws-amplify

Bootstrap 4 - DropDown option - Element is positioned above the navigation bar

Currently facing an issue with the DropDown menu. Whenever I add padding to the DropDown menu (class - drop_link), it ends up pushing the entire element over the <nav>. I'm unsure of how to prevent this from occurring. I attempted to disable som ...

javascriptjqueryhtmlcssbootstrap-4

Adjust the dimensions and position of the notification box using Twitter Bootstrap

I am struggling to center and adjust the size to 80% of an alert box, but the text-center class is not achieving this for me. <div class="text-center"> <div class="alert alert-info" style="width: 80%;" role="alert"> <i class="fa fa- ...

htmlcsstwitter-bootstrap

a guide to structuring REST API requests with axios in Vue.js

In my Vue.js app, I am utilizing Axios to consume a REST API. Each time I make an API call, I create a new instance of Axios with the necessary authentication headers by calling axios.get in various places. // UserdataComponent.vue const anInstance = axio ...

javascriptvue.jsaxios

Troubleshooting problem with AJAX in Rails 3.0.10: Investigating create.js.erb script

Embarking on my journey into web development, so please bear with me. My first foray into app creation led me to Rails 3.0.10 Attempting to integrate AJAX into a micropost form has been my current challenge. I've ensured the controller set up is co ...

ruby-on-railsajaxruby-on-rails-3jquery

Using a Javascript library within an Angular component: A comprehensive guide

I've been working on a Web-Client project that involves visualizing sensor data such as velocity and acceleration within a coordinate system. In order to display this coordinate system, I decided to use the graph.js library from https://github.com/dhu ...

javascriptangulartypescript

Having trouble accessing Google Spreadsheets in CSV format but unable to do so in JSON format?

I have been experimenting with Google's Visualization API to retrieve data from a specific row in a Google Spreadsheet based on a given string in the column labeled "key". When I run the following code, the success function is triggered and I receive ...

jqueryajaxjsongoogle-sheets

What is the process for submitting a post request with custom fields to the Wordpress rest api?

Currently, I am attempting to make a post request to /wp-json/wp/v2/posts while also including custom fields. However, it seems that although the request field is successfully being sent, the custom fields are not updating with the data I am trying to send ...

javascriptphpajaxxmlhttprequestwordpress-rest-api

tips for accessing the useState value once it has been initialized

When using the state hook in my code, I have: const [features, setFeatures] = useState([]) const [medicalProblem, setMedicalProblem] = useState([]) The medicalProblem variable will be initially populated with a response from an API call: useEf ...

javascriptreactjstypescriptnext.js

Having trouble with Angular router.navigate not functioning properly with route guard while already being on a component?

I am currently troubleshooting an issue with the router.navigate(['']) code that is not redirecting the user to the login component as expected. Instead of navigating to the login component, I find myself stuck on the home component. Upon adding ...

javascriptangulartypescriptangular-routingangular-components

Arrange the two buttons in a vertical position

Excuse any weak code you may come across, as I am a backend developer. This is the current appearance of my form: The alignment of these two buttons in Chrome is not correct The issue only occurs in Chrome, with FireFox and Edge displaying the form as e ...

htmlcsstwitter-bootstrap-3

Is it possible to pre-select a value in a PrimeVue Dropdown component?

Situation: Currently, I am incorporating PrimeVue into a Vue.js project. Within this setup, there is a dropdown component sourced from PrimeVue, utilizing an array of objects. The structure of the dropdown component appears as follows: <template #positi ...

javascriptvue.jsprimevue

Can OR be utilized within a find operation?

I am currently developing a social media platform similar to Facebook using Express and MongoDB. One of the features I'm working on is adding friends to user profiles. When a user clicks on a button that says "Send Friend Request" on another user&apos ...

javascriptmongodbexpressejs

The process of executing a PHP file from JavaScript using XMLHttpRequest is experiencing issues on a XAMPP local server

I'm attempting to execute a PHP file using JavaScript. I have my XAMPP server set up and all files saved in the htdocs folder. The PHP file is also stored in the htdocs folder and works correctly when accessed via http://localhost/php_test.php in Chro ...

javascriptphphtml

Should the value exceed the designated width of the combobox, it should be displayed across multiple lines

Having an issue where, when I set the width of the combobox and the value inside it is longer than expected, the full value isn't displayed. I am considering displaying the value on multiple lines to ensure the entire content is visible. Unfortunatel ...

htmlcss

Is it possible to nest a React component within a state?

Is it permissible to use any of the three options below, but I can't find recent official information regarding this? constructor(props) { this.state = { item: <SomeItem />, item1: () => <SomeItem />, item2: Some ...

javascriptreactjs