Fix background transition and add background dim effect on hover - check out the fiddle!

I'm facing a challenging situation here. I have a container with a background image, and inside it, there are 3 small circles. My goal is to make the background image zoom in when I hover over it, and dim the background image when I hover over any of the 3 little circles.

After some effort, I managed to place the 3 circles properly on top of the container and achieve the background zoom effect on hover. However, I'm encountering 2 issues.

Issue 1: I'm not satisfied with the method I used to overlap the circles, which involves this code snippet:

    #circle_wrap{
    position: absolute; 
    margin-top: -130px;
    }

Issue 2: I'm struggling to figure out how to dim the background. My initial plan was to have a hidden black container with 0.5 opacity that would be displayed when hovering over one of the circles. But I couldn't find a way to select the overlay.

Check out my JSFIDDLE here

If a pure CSS solution isn't feasible, I'm open to a jQuery solution as well.

I welcome any advice, tips, or solutions you may have. I really need to make this work. Thank you.

javascriptjqueryhtmlcss

Answer №1

After struggling with CSS, I finally decided to use jQuery to solve the issue. If you're curious, you can view the result here. Although I managed to fix the first problem with better CSS, the second one required jQuery.

For problem number 1, I used:

.circle_wrap{
position: absolute; bottom: 0; width: 100%; height: 100px;
}

and added position:relative to its parent element.

The solution for problem number 2 is:

$(".circle_wrap").hover(function () {
  $(this).siblings("img").css("opacity", "0.2");
  },
  function () {
    $(this).siblings("img").css("opacity", "1");
});

UPDATE: Added Safari support

.wrap img:hover{
-moz-transition: scale(1.1) rotate(0deg);
transform: scale(1.1) rotate(0deg);
-webkit-animation-name: scaleThis;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function:ease-in-out;
}
@-webkit-keyframes scaleThis {
0% { -webkit-transform:scale(1) rotate(0deg); }
10% { -webkit-transform:scale(1.1) rotate(0deg); }
100% {-webkit-transform:scale(1.1) rotate(0deg); }
}

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

Certain CSS styles do not function properly, requiring me to include them directly in the HTML code

After successfully creating a button in HTML and applying CSS to add border effects, I ran into an issue when trying to change the background color or text color. Despite adding styles directly to the HTML file, these specific changes did not take effect. ...

htmlcss

Notification for Unsuccessful Login Attempt on the Client Side

In my node.js project, I have implemented a login form that sends data to the server.js file as URL parameters. When the sent data is verified against registered users, the client is successfully logged in. However, I am facing an issue on how to notify th ...

javascriptnode.jsexpress

Tips for adjusting the position of overflowing text on a website using CSS in real-time

I'm currently working on an Angular application and I'd like to customize the styling so that any text exceeding 128 characters is not displayed. Ideally, if the text exceeds 128 characters, it should move to the left; otherwise, it should remain ...

cssangulartypescript

Using the OR operator in an Angular filter

How can I create a filter with a range slider that shows multiple categories when it's in a certain position? I have tried using the code below to filter based on the range, but it only captures the first word after the OR operator. Can anyone provid ...

javascriptangularjsfilteroperator-keyword

A guide on accessing header response information in Vue.js

Currently, I am operating on my localhost and have submitted a form to a remote URL. The process unfolds in the following sequence: Submission of a form from localhost Being redirected to a remote URL Sending a response back from the Remote URL to localh ...

javascriptvue.js

What is the most effective way to save numerical information to a file?

Imagine a scenario where there is an array filled with one million random numbers: [ 0.17309080497872764, 0.7861753816498267, ...] The task at hand is to store these numbers onto a disk for future retrieval. While storing them in text formats like JSON or ...

javascriptnode.jsfile

I needed to integrate CustomPicker into my functional component within a react native project

Could someone please clarify if I wish to convert the CustomExample Class component into a functional component **like this: ** const CustomExample = () =>{...} then how would I modify the following code to function in a similar manner: <Custo ...

javascriptreactjsreact-nativejsxpicker

Issues with Ajax.BeginForm causing JSON to be returned as undefined (Confirmed by Dev Tools)

I'm facing a strange issue while attempting to retrieve a basic JSON object from my controller. Although I can see the JSON returned perfectly fine in Firefox debug tools, when I look at my javascript callback, I receive an undefined in my console.log ...

jqueryajaxjsonasp.net-mvc

How to Handle CRUD Errors in NodeJS using Mongoose and Return a Custom Response to the Client

Setup NodeJS 10 MongoDB Client side app : Angular 9 About In my NodeJS application, I have a controller and service that work together to create an entity and return a promise. Here's how it looks: Controller async create(@Body() entityData: an ...

javascriptnode.jsangularmongoose

Tips on utilizing toggleClass to display only the currently active item and obtaining the active class name

I am new to Jquery and CSS/scss and I have successfully created a dynamic boostrap card that resembles a record player. The goal is to generate multiple boostrap cards based on the data in DB, but for simplicity, I am showing only 2 examples below. My ques ...

jquerycssjquery-ui

Users using an iPhone are unable to adjust the scale or scroll on this website

I find myself wondering what I might be overlooking in this situation Here is the HTML code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="shortcut icon" href="../../nImg/favicon.ico" ...

iphonehtmlcssscale

Error message "Undefined is not a function" occurred while using jQuery's .replace and scrollTop functions

I'm having issues with the scroll function in my code. It doesn't seem to be able to locate the ids in my HTML, even though I can't figure out why. I had a previous version that worked perfectly fine (unfortunately, I didn't save it D:) ...

javascriptjqueryhtmlundefined

AngularJS is displaying a blank Galleria when images fail to load

I have a code snippet similar to the following var dummyAlbum = [ {image: 'http://i.imgur.com/7Osllxil.jpg'}, {image: 'http://i.imgur.com/YACmI1G.jpg'}, {image: 'http://i.imgur.com/af4ZDy8.jpg'}, {image: &apos ...

javascriptangularjsgalleria

Is it beneficial to utilize jQuery ahead of the script inclusions?

While working on a PHP project, I encountered a situation where some parts of the code were implemented by others. All JavaScript scripts are loaded in a file called footer, which indicates the end of the HTML content. This presents a challenge when tryi ...

javascriptjquery

Tips for Successfully Sending Vue Data in Axios POST Call

I'm struggling to pass Vue data to an axios.post request. Using the Vue template doesn't seem to work. How can I successfully pass the Data? Here is my Code: <body> <div id="app" class="container"> <div> ...

javascriptvue.jsaxios

Personalizing File Selection

What is the process for customizing file uploads? <%= f.file_field :image, class: 'inputfile' %> <label for="image">Choose an image</label> I am looking to replace "choose an image" with "choose a file" ...

javascriptruby-on-railsruby

Is it possible for me to enhance Object, Function, Date, and other similar entities in Node by adding "static methods"?

When creating a Node.js module called "augs" that includes: Object.foo = "bar"; And then entering the following commands in the REPL: require("./augs"); typeof Object.foo The result returned is 'undefined'. In our web application, we have a ...

javascriptnode.jsstatic-methods

Error 414: The URL exceeds the maximum length and cannot be processed

I am currently utilizing vuejs and sending an axios request to the server in order to download a csv file. download() { var that = this //this.records = [{id: 1, name: 'Jack'}, {id: 2, name: 'Jacky'}, {id: 3, name: &apos ...

javascriptvue.jshttpaxios

jQuery AJAX call failing to return to page

Currently, my form is set up to upload multiple text fields and a file to a PHP script for saving. The script successfully saves the file and text fields to an SQL database. At the end of the PHP script, I have the following code snippet: ('state&apo ...

javascriptphpajax

Trying to use 'cpa' before it is initialized will result in an error

I encountered the error stated above while using this particular route: router.put('/edit/:id', async (req, res) => { const cpa = await CPASchema.findById(req.params.id).then(() => { res.render('edit', { cpa:cpa }); cons ...

javascriptnode.jsmongodbexpress