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

Using TypeScript with Watermelondb

I'm currently developing a React App and I want to implement Watermelondb for Offline Storage, but I'm unsure about using it with TypeScript. I have already set up the database and created Course and Lesson model files from the Watermelondb libra ...

javascripttypescriptreact-nativewatermelondb

Is there a way to transfer a value set from one tpl file to another tpl file in cscart using smarty template engine?

I am trying to retrieve the value of a variable set using an input tag from one tpl file. Here is the input tag in A.tpl file: <input type="checkbox" class="checkbox" name="payment_data[processor_params][enable_addbillcard]" id="optional_enable_addbil ...

phphtmlsmartycs-cart

The webpage fails to return to its original position after the script has been executed

My website has a sticky div that stays at the top when scrolling down, but does not return to its original position when scrolling back up. Check out this example function fixDiv() { var $div = $("#navwrap"); if ($(window).scrollTop() > $div.data("top ...

javascriptjquerycss

I'm having trouble executing the straightforward code I discovered on GitHub

https://github.com/Valish/sherdog-api Upon downloading the sherdog-api, I embarked on installing node.js as a prerequisite for using this new tool, despite having no prior experience with such software. Following that, I opened up the command prompt and n ...

javascriptnode.jsgithubnpm

Trouble with stroke width in Svg bezier path while using a mask

I'm having trouble hiding part of a path using a mask. When I apply the mask, the stroke width doesn't seem to work anymore. Any suggestions on why this is happening and how to fix it? svg { position: absolute; width: 100%; height: 100%; ...

htmlcsssvg

Tips for saving an image that has been dragged onto the browser locally

I recently started working with Angular and decided to use the angular-file-upload project from GitHub here. I'm currently in the process of setting up the backend for my application, but I'd like to be able to display dropped files locally in th ...

javascriptangularjsupload

CSS First Element

"When an element with a specific id has a first-child descendant that is any of the heading tags (h1, h2, h3, h4, h5, or h6), apply the following CSS styles:" I have come up with the following selector: #content:first-child h1, #content:first-child h2, ...

csscss-selectors

In a particular configuration involving Docker and Nginx rewrite rules, there is a notable alteration in URLs that include question marks when utilized in jQuery.ajax calls

My PHP/Laravel app is running smoothly in a dockerized environment using the php:7.4-apache container. During development, we had it accessible through http://localhost:81. Now, our aim is to make this service available at http://localhost/foo/bar within ...

jqueryajaxdockernginxmicroservices

The jQuery code runs successfully on jsFiddle, but fails to execute on my website

I've created a login script that generates a username by combining the first and last names (on blur), eliminating spaces, and removing special characters. While everything functions correctly in jsFiddle, I encounter an error on my website indicatin ...

jquery

Having difficulty integrating framer-motion with react-router

I've been working on adding animations and smooth transitions to my app using Framer-motion, but I'm facing some challenges in getting it all to function properly. With react-router 6, my goal is to trigger exit animations on route sub-component ...

javascriptreactjsframer-motion

Is it possible to apply CSS to the alert and confirm functions in Angular?

Currently, I am facing an issue with implementing CSS on elements that are nested inside a function. I am unsure of how to access them properly. For example: updateUser() { this.usersService.UpdateUser(this.user.id, this.user) .subscribe(() =& ...

cssangular

Trouble encountered with fetching cities by country ID on document load using a jQuery custom plugin

I have developed a jQuery plugin that fetches cities based on the selection of a country from a dropdown menu. Now, I am looking to achieve the same functionality when the form loads on the page without duplicating my code within the document ready functi ...

jqueryajaxonchangepageload

Having difficulty with pagination within a callback function

I have been attempting to paginate in a call to a callback function, but I am encountering an error on the second call. Here is what my function does: let content = '' let size = 100 let from = 1 function result(size, from, callback) { ap ...

javascriptnode.jsexpressecmascript-6

Refreshing a webpage using CSS and jQuery Mobile's AJAX functionality

How can I apply CSS to a partial view rendered using AJAX in jQuery? $.ajax({ url: baseUrl, type: 'GET', data: { date: date }, success: function (response) { ...

jqueryjquery-mobile

What is preventing my cookie from being saved?

Whenever a user clicks "sign in", I trigger a POST ajax request. Here is the function handling that request: app.post('/auth', function(req,res,next){ var token = req.body.token ...

javascriptnode.jsexpress

"Obtaining mouse coordinates in VueJS: A step-by-step guide

I am using a component that is activated by v-on:click="someMethod". Is there a way to retrieve the X and Y coordinates of the mouse click within this component? Extra context: The component I'm working with is an HTML5 Canvas element. ...

javascriptvue.jsvuejs2vue-component

Error message: Node: TypeError - Attempted to access the 'sort' property of an undefined variable while using findOneAndUpdate() within a find() operation

My code snippet is shown below: var MongoClient = require('mongodb').MongoClient; MongoClient.connect('mongodb://localhost:27017/school', function(err, db) { if (err) throw err; db.collection('students').find().toArray( ...

javascriptnode.jsmongodb

The Jquery UI dialog refuses to close when the Inner Application is closed

I'm facing an issue with a jQuery dialog box. I have set up a division under the dialog, and within that division, I've loaded an Iframe that contains a URL. The problem arises when I click the close button on the URL window - the dialog box re ...

jqueryajaxjquery-ui-dialog

The entered value in the <input> field is not valid

I am encountering an issue where the input value is auto-filled, but when I click the submit button, the input field value is not recognized unless I modify something in it, such as deleting and adding the last word to the first name. Is there a way to m ...

javascriptreactjsjsx

Having trouble with updating your website asynchronously through code? In need of a detailed explanation?

Here are two Javascript functions that are used to call a python file in order to update an HTML page. The first function works perfectly fine, but the second one seems to be malfunctioning without throwing any errors. function button(key) { var xhttp ...

javascriptpythonhtmlcssajax