Setting up an image DIV for a dynamic overlay effect

Here is a JSFiddle that works correctly with fixed height and width: http://jsfiddle.net/69td39ha/2/. The animation activates correctly when hovered over.

I attempted to adapt the above example to be responsive without fixed dimensions. However, I'm experiencing issues with the animation display in this second fiddle: http://jsfiddle.net/cer1ts9x/2/. When hovered over, the animation does not show up as expected.

Below is the HTML code:

<div class="pageImgHdrSub percPadTop banner">
     <a href="google_events.aspx" title=""><img src="http://appcenter.clickmeeting.com/uploads/2014/05/google-calendar-logo1.gif" alt="" /></a>
    <p class="companyInfo">View Events Calendar</p>
    <div class="cornerTL"></div>
    <div class="cornerTR"></div>
    <div class="cornerBL"></div>
    <div class="cornerBR"></div>
</div>

I need assistance in modifying the second fiddle to ensure that the animation displays correctly when hovered over.

jqueryhtmlcssanimation

Answer №1

Modified your JSFiddle

Hoping this meets your requirements?

Essentially made changes in 3 places:

.pageImgHdrSub -> width: auto;

.banner div{ 
    -moz-border-radius:170px;
    -webkit-border-radius:170px;
    border-radius:170px;
}

Also adjusted line 16 of the JavaScript code:

el.find('div').stop().animate({width:340,height:200},'slow',function(){

UPDATE:

To achieve a circular animation effect, ensure width and height are set to the same value (in the JavaScript code). The border radius should be half of the width/height for a perfect circle.

Answer №2

Previously, the image was in a square shape but now it has transformed into a rectangular form. Due to this change, achieving a perfect rounded circle is not possible. However, you can still adjust the width and height parameters in the animate function to attain satisfactory results:

el.find('div').stop().animate({
    width: 360,
    height: 160
},

Access the Updated JsFiddle 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

Dropdown items and Hamburger icon are not collapsing or functioning properly even when they resize correctly

I've recently started learning web development using Bootstrap, and I'm facing an issue with the navbars. Specifically, the dropdown/collapse feature is not working as expected with the dropdown items and hamburger icon. I've attempted to i ...

htmlbootstrap-4dropdownhamburger-menu

The Blueimp File Uploader seems to be sending numerous submissions at once

I've been tasked with fixing an issue on our site that I didn't originally build. The previous developer who worked on this project is now occupied with another task, leaving me to figure out what's going wrong. We are utilizing the basic bl ...

javascriptjqueryajaxjquery-file-uploadblueimp

Our website features a dynamic functionality where users can select from two dropdown lists with identical values. Upon selecting multiple values from the first dropdown, the corresponding values in

When selecting multiple values from the first dropdown list, the second dropdown list will automatically have the same value selected as the first dropdown. ...

javascriptjqueryhtmljspbootstrap-4

Employing IF conditions within a form to refine options

I am looking to streamline the options in my form based on the car and transmission selected. I have set up the form, but I am struggling with the JavaScript code. I need help figuring out how to only display certain color options when Car 1 is chosen alon ...

javascripthtmlcssif-statement

Executing multiple click events using JavaScript

I have recently started learning JavaScript and am experimenting with the following script: <script type="text/javascript"> $(document).ready (function() { $('#apply').click(function() { $('#applyinfo').toggle ...

javascriptjqueryweb-developer-toolbar

Personalize the material design datatable checkbox option

Recently, I delved into the world of material-ui design in conjunction with ReactJS. However, I have encountered a roadblock while attempting to customize the style of a checkbox that is being displayed under the <TableRow /> component. (Check out th ...

cssreactjssvgmaterial-designmaterial-ui

Getting the value of a variable within the scope of AngularJS can be achieved by utilizing

I have an ng-repeat directive in my code that displays slides. Here is a snippet of the data: slides = [{ src: "/sikiosk/slidedata/Global/NA/USNS/Cafeteria/5000_24.jpg", interval: 5000 }, { src: "/sikiosk/slidedata/Global/NA/USNS/Cafeteria/5000_login-regi ...

javascripthtmlangularjsangularjs-ng-repeat

Tips for managing the velocity of JavaScript navigation scrolling

Hey everyone, I recently discovered this incredibly helpful JavaScript sticky side navigation script and it works like a charm! However, since I don't know much about JS, I was wondering if there's a way to slow down the scrolling speed? functio ...

javascriptjqueryhtmlcss

The issue of Bootstrap icons not displaying on the front-end arises when integrating them into a Vuejs Template

I'm in the process of constructing a web application using Vue.JS. I've integrated the [Bootstrap Icons][1] into my application, but for some reason, the icons are not showing up on the screen. Here are the steps I followed: Installed Bootstrap ...

htmlcsstwitter-bootstrapbootstrap-4vuejs2

jQuery 'if' condition not getting detected

My jQuery code is not recognizing an if statement. You can check out the CodePen link here. On my site, I have 4 page transitions - page right, page left, page up, and page down. The contact page is hidden beneath the main hero sections and appears with t ...

jqueryhtmlcsstransition

jQuery element with listener not triggering as expected

I'm facing some confusion while working on this issue. I am attempting to create a dynamic form where users can add descriptions, checkboxes, and number inputs as they please. Currently, I have developed a simple dynamic form using jQuery, which allow ...

javascriptjqueryhtml

Implementing Module Dependencies using RequireJS

I'm currently working with RequireJS and encountering some issues when trying to require local libraries. In my process, I've set up a JS file to import the library that was installed using npm JS function synthesizeToAudioFile() { ...

htmlrequirejs

Issue with CSS animations not functioning correctly within React application

Currently in the process of creating a basic dice roller and aiming to incorporate a spin animation for added visual interest. Strangely, the animation only triggers on the first roll and not on subsequent attempts (unless I refresh the page). Here is the ...

cssreactjsreact-hooks

What is the proper way for a browser to handle a srcset attribute containing the same path twice?

When the same path or similar sized images with different pixel density descriptors are used, how does the specification address it? An interesting case study is observed when viewing an image in desktop browsers like Windows Firefox 82.0b2 and Chrome 85. ...

htmlresponsive-designspecifications

Arranging the Bars in a Bar Chart Using Chart.JS

Lately, I've been playing around with ChartJS and encountering an issue with sorting the bars in descending order, from lowest to highest. Despite my efforts to troubleshoot, I haven't had any success in resolving it. ...

javascriptjquerychart.js

JQuery is blocking the submission of an HTML form

During my exploration of an AJAX/JQuery tutorial for a registration script that interacts with PHP/MySQL and is submitted via JQuery, I encountered a recurring issue. The problem lies in the form submitting directly to the action page instead of its intend ...

javascriptphpjqueryhtmlajax

CSS: elements that are only visible when positioned above specific elements

Can we create an element that is only visible above specific other elements? For instance, in the following code snippet, I want the .reflection element to be visible only above the .reflective elements (located at the top and bottom) and not visible on t ...

javascripthtmlcss

Having issues with customizing the design of MaterialUI Accordion header

Link to my code sandbox project I am encountering issues with the styling in my Accordion Heading. My Accordion Contents are set up like this: <Accordion heading1= { <DishItem name="Döner Teller Spezial" price="13,60€"/> ...

cssreactjsmaterial-uiaccordion

Switch the PHP-generated image using jQuery

Below is the HTML and Javascript code I am currently using: <script type="text/javascript"> $(function() { $('#form_1 input').on('change', function() { val = $('input:radio[name=graf]:checked').val(); ...

phpjqueryajax

Deleting entries from a selection of items in a list generated from an auto-fill textbox

I have successfully implemented an auto-complete Textbox along with a styled div underneath it. When the client selects an item from the Textbox, it appears in the div after applying CSS styling. Now, I am looking to create an event where clicking on the s ...

javascriptjqueryhtmlcssjquery-ui