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

Is it possible to integrate a Neo4j Graph Visualization running on a virtual machine into my flask user interface?

My current setup involves running Neo4j on an Azure Virtual Machine and accessing the graph visualization through a web browser. In addition, I have developed a UI using Python with Flask that is currently running locally. I am interested in embedding th ...

pythonhtmlflaskneo4jazure-virtual-machine

Discover the simple steps to integrate a timezone dropdown feature into your WordPress website using the Contact Form 7 plugin

I am designing a website and I need to implement a query form with a customizable time zone selection. Are there any specific steps to add a time zone drop-down menu using Contact Form 7? Here is the desired result I'm aiming for: Your assistance wil ...

htmlwordpressdrop-down-menuwordpress-themingcontact-form-7

Adjusting font size, contrast, brightness, and sound levels on a website with the help of jQuery

My client has a new requirement: adding functionality to increase font size, adjust contrast/brightness, and control sound on his website. When clicking on any of the control images, a slider should appear for the user to make adjustments accordingly. Ho ...

javascriptphpjqueryhtmlcss

Utilizing a single controller in multiple locations within AngularJS

I am currently working on developing an Ionic application which includes screens with lists containing checkboxes and the option to select all items. My experience with AngularJS and Ionic is fairly limited. The "Select All" functionality works as intende ...

javascripthtmlangularjsionic-framework

Using Jquery to detect if there are any Space characters in the user input

In my form, users are required to set up a new Username. The problem arises when they include a space in their username, which I want to prevent. Currently, I am able to detect the presence of a space with this code: var hasSpace = $('#usernameValue ...

javascriptjqueryhtmlforms

Is there a way to change an HTML document into a Word file?

I am looking for recommendations on libraries that can help me save HTML documents in memory as Word .DOC files. Any suggestions for both closed and open source options are welcome. Additionally, could someone provide links to these libraries based on the ...

htmlms-word

What is the best way to toggle the visibility of a background image within a carousel?

As a beginner in j-query, I am struggling with creating a slider image carousel using a full background image. Most of the solutions I found online require a fixed width for all pictures to slide smoothly. However, I believe there might be a way to use an ...

jqueryhtmlcss

In the iOS app when the Ionic HTML5 select keypad is opened, a bug causes the view to scroll upwards and create empty space after tapping the tab

I am currently working with Ionic v1 and AngularJS, utilizing ion tabs: <ion-tabs class="tabs-icon-top tabs-color-active-positive"> <!-- Home Tab --> <ion-tab icon-off="ion-home" icon-on="ion-home" href="#/tab/home"> <ion-nav ...

javascriptiosangularjshtmlionic-v1

Ways to Implement Horizontal Scrolling in Dojo FilteringSelect Component

The select field on my form contains option values that are over 250 characters long, making it difficult for users to read them within the select box. Is there a solution to make the select field scroll horizontally or wrap the lengthy text? ...

javascripthtmlcssdojo

For my Bootstrap website, it's a constant struggle to balance between having a responsive menu item and ensuring its correct visual appearance

I need help with creating a unique menu design for my website. On the desktop site, I want to display "username/password/sign in" buttons, while on the mobile responsive version I only want to show a single "sign in" option that redirects users to the sign ...

htmlcsstwitter-bootstrap

What is the simplest method to control access to my JSON converter?

A custom method was created to handle URL queries for a specific model: /ajax/places/city?name__icontains=ranch This method searches the city model for cities with "ranch" in their name and presents the results as json: [ { "pk":24944, "m ...

jqueryajaxdjangosecuritypermissions

Achieving Flexbox alignment in a responsive layout

Struggling with achieving a responsive layout using Flexbox. Picture a page filled with panels. The main objective is to display a certain number of panels per row, aligned both horizontally and vertically like the rest. The main issue I am encountering ...

htmlcssflexbox

Dynamic Filtering with jQuery List

I'm attempting to create a dynamic filter list on keypress event. For example, if I type "It" into the input field, the elements that do not match this value will be hidden. I'm unsure if the code structure I have implemented below effectively ac ...

javascriptjqueryhtml

Troubleshooting: Why isn't my jQuery Click Event functioning in Mozilla but working perfectly fine in

While I know this question has been asked before, I can't seem to locate the posts I remember reading about it. I apologize for any duplication, but I am trying to implement a "click anywhere BUT here to close element overlay" effect on my personal we ...

jqueryhtmlgoogle-chromemozilla

Expandable fluid inline svg that dynamically fills the remaining space alongside text within a flex row

How can I ensure that an inline SVG occupies all available space within a row without specifying its height across different screen sizes? The solution involves setting the SVG to have 100% height with a viewBox, allowing it to adjust accordingly while ma ...

csssvgflexbox

Bootstrap datetimepicker is not showing the calendar for selecting a date, making it impossible to choose a specific date

I am facing an issue with integrating the bootstrap datetimepicker with Datatables to filter the data based on selected dates. The problem is that only an input bar is displayed on the page, and there is no calendar or calendar symbol visible. I suspect it ...

javascripthtmldatatablesbootstrap-datetimepicker

Timeout for jQuery animations

My jQuery animation script is causing an issue where it does not finish the animation before returning to the parent function. Specifically, the JavaScript code changes a background color, calls the animate function, the animation starts but doesn't c ...

javascriptjquery

Looking to link a click event to a particular hyperlink?

I have a question about attaching click events to hyperlinks. Here is an example code snippet: $(".notice").click(function() { alert("Hello world!"); }); Below is the HTML for my hyperlink: <a href="http://www.bba-reman.com/catalogue/DetailedProdu ...

jquery

The concept of CSS Parent Elements refers to the relationship

Is it possible to dynamically apply CSS style based on the parent property of a div element using JavaScript? Here is an example: <div clas="parent"> <div class="child"> <div class="x"></div> </div> </d ...

javascriptcss

What is the best way to switch between components when clicking on them? (The component displayed should update to the most recently clicked one

I am facing a challenge in rendering different components based on the navbar text that is clicked. Each onclick event should trigger the display of a specific component, replacing the current one. I have 5 elements with onclick events and would like to re ...

javascriptjquerycssreactjs