My goal is as follows:
I have multiple div-elements (class = parent) that will contain images. The images should only be visibly when the user positions his mouse curser in the respective div-element. In addition, I want to enlarge the picture when the mouse curser is in the div and the picture is visible.
My idea was to create a child-element into the respective div-element. On mouseenter the child-element is set to display = 'none'. On mouseleave the child-element is set to display = 'block.
What I want to achieve is that the user can only see the parent-div when he positioned his mouse courser on the respective element. In the following code, the parent-div is green whereas the child-div is grey. So when the user moves his mouse onto one of the elements, the grey child-div should disappear and the parent div-should become visible. Therefore, the color of an element in this specific code should change from grey to green when the user positioned his mouse in the element.
I assume that I made a very basic mistake.
Thanks for your help.
$('#child_1').mouseenter(function(event) {
let target = event.target;
target.style.display = 'none';
})
.mouseleave(function(event) {
let target = event.target;
target.style.display = 'block'
});
$('#child_2').mouseenter(function(event) {
let target = event.target;
target.style.display = 'none';
})
.mouseleave(function(event) {
let target = event.target;
target.style.display = 'block'
});
$(document).ready(function() {
$("[id^=parent]").hover(function() {
$(this).addClass('transition');
}, function() {
$(this).removeClass('transition');
});
});.transition {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
.child {
background: grey;
width: 100%;
height: 100%;
position: absolute;
box-shadow: inset 0 0 20px #fff;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}
.parent {
background: darkolivegreen;
width: 300px;
height: 424px;
position: relative;
float: left;
margin: 30px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent_1" class="parent">
<div id="child_1" class="child"></div>
</div>
<div id="parent_2" class="parent">
<div id="child_2" class="child"></div>
</div>I just created this CodePen. Is this what you're looking for?
I have simplified your JavaScript so it just adds/removes an 'active' class when you roll over a parent div:
$('.img-wrapper').mouseenter(function(event) {
$(this).addClass('active');
})
$('.img-wrapper').mouseleave(function(event) {
$(this).removeClass('active');
});
The animation is dealt with in the css:
.img-wrapper {
overflow: hidden;
background: lightblue;
width: 300px;
height: 300px;
position: relative;
margin: 0 10px;
}
.img-wrapper img {
opacity: 1;
width: 100%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
transition: all .4s ease-in-out;
}
.img-wrapper.active img {
opacity: 0;
transform: translate(-50%, -50%) scale(1.25);
}