Hi Guys,
I am having an issue with image hover. It flickers when I hover on it. Below are my sample codes
---- HTML –
<div data-ng-cloak data-ng-repeat="image in post.post_files track by image.id" class="image-item">
<span class="overlay"><i class="remove icon" title="Click here to remove image"></i></span>
<img class="post-crop-image" data-ng-click="removeFile(image.id)" data-ng-src="@{{'/' + prefixUrl + 'storage/app/' + image.file_path}}" alt="image"/>
</div>
<!-- <div class="add-more-pictures tooltipstered" ngf-max-size="@{{ $root.constants.MAX_IMAGE_SIZE }}" ngf-select="addMorePostImage($files, $invalidFiles)" accept="image/*" title="Add more photos">
<i class="plus icon add-photo-icon"></i>
</div> -->
<div class="add-more-pictures tooltipstered" ngf-select="uploadMorePostFiles($file, $invalidFiles)"
accept="image/*" ngf-max-size="@{{ $root.constants.MAX_IMAGE_SIZE }}" title="Add more photos">
<i class="plus icon add-photo-icon"></i>
</div>
– CSS –
.sharing-icons{ font-size: 7em !important; cursor: pointer; }
.twitter-icon { color: rgb(51, 189, 241); }
.pinterest-icon { color: rgb(226, 72, 73); }
.align-icon-center { text-align: center; }
.mail-icon { color: rgb(255, 255, 255); }
.choose-action { vertical-align: middle; font-size: 2em; margin: 0px 20px; }
.post-crop-image { width: 150px; height: 150px;}
.post-images-block { display: inline; /** white-space: nowrap; **/ }
.image-item {
display: inline-block;
white-space: nowrap;
cursor: pointer;
position: relative;
width: 150px; height: 150px;
vertical-align: middle;
margin-bottom: 3px;
}
.image-item .overlay {
height: 100%;
width: 100%;
margin: 0;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 100;
color: #fff;
align-items: left;
display: none;
}
.image-item .delete-image {
position: absolute;
top: 2;
right: 2;
margin: 0;
z-index: 101;
color: white;
}
.image-item:not(:nth-child(1)) {
margin-left: 5px;
}
.add-more-pictures {
border: 2px dashed #dddfe2;
border-radius: 2px;
box-sizing: border-box;
/*display: inline-block;*/
height: 150px;
/*position: relative;*/
width: 150px;
padding: 75px auto;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0px;
vertical-align: middle;
}
.add-photo-icon { font-size: 2em !important; cursor: pointer; }
— Javascript –
//display post image overlay on hover effect
$(document).on('mouseenter', '.post-crop-image', function() {
// $('.image-item .overlay').show();
$(this).parent().find('span.overlay').show();
});
$(document).on('mouseleave', '.post-crop-image', function() {
// $('.image-item .overlay').show();
$(this).parent().find('span.overlay').hide();
});
– OUTPUT –
ronpat
December 17, 2016, 7:11pm
2
Hi, Megafu_Anthony.
The code snippits that you posted does not demonstrate a problem.
I did note that a couple of items are missing a unit of measure.
I would like to request that you assemble a page that actually demonstrates the issue.
You can use CodePen, JSFiddle, or preferably write a “working page” that includes a proper doctype and complete head sections including links to relevant resources, and attach images if necessary or use placeholders.
In other words, send us something that allows us to see the problem that you see so we have something to work with.
My attempt to assemble a working page from from your code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Flickering Hover</title>
<!--
https://www.sitepoint.com/community/t/flickering-hover-for-div/247375
Megafu_Anthony
-->
<style type="text/css">
.sharing-icons{ font-size: 7em !important; cursor: pointer; } /* PLEASE DO NOT STRING IN-LINE */
.twitter-icon { color: rgb(51, 189, 241); }
.pinterest-icon { color: rgb(226, 72, 73); }
.align-icon-center { text-align: center; }
.mail-icon { color: rgb(255, 255, 255); }
.choose-action { vertical-align: middle; font-size: 2em; margin: 0px 20px; } /* PLEASE DO NOT STRING IN-LINE */
.post-crop-image { width: 150px; height: 150px;} /* PLEASE DO NOT STRING IN-LINE */
.post-images-block { display: inline; /** white-space: nowrap; **/ }
.image-item {
display: inline-block;
white-space: nowrap;
cursor: pointer;
position: relative;
width: 150px; height: 150px; /* PLEASE DO NOT STRING IN-LINE */
vertical-align: middle;
margin-bottom: 3px;
}
.image-item .overlay {
height: 100%;
width: 100%;
margin: 0;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 100;
color: #fff;
align-items: left;
display: none;
}
.image-item .delete-image {
position: absolute;
top: 2; /* UNIT OF MEASURE? */
right: 2; /* UNIT OF MEASURE? */
margin: 0;
z-index: 101;
color: white;
}
.image-item:not(:nth-child(1)) {
margin-left: 5px;
}
.add-more-pictures {
border: 2px dashed #dddfe2;
border-radius: 2px;
box-sizing: border-box;
/*display: inline-block;*/
height: 150px;
/*position: relative;*/
width: 150px;
padding: 75px auto;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0px;
vertical-align: middle;
}
.add-photo-icon {
font-size:2em !important;
cursor:pointer;
}
</style>
</head>
<body>
<div data-ng-cloak data-ng-repeat="image in post.post_files track by image.id" class="image-item">
<span class="overlay"><i class="remove icon" title="Click here to remove image"></i></span>
<img class="post-crop-image" data-ng-click="removeFile(image.id)" data-ng-src="@{{'/' + prefixUrl + 'storage/app/' + image.file_path}}" alt="image"/>
</div>
<!--
<div class="add-more-pictures tooltipstered" ngf-max-size="@{{ $root.constants.MAX_IMAGE_SIZE }}" ngf-select="addMorePostImage($files, $invalidFiles)" accept="image/*" title="Add more photos">
<i class="plus icon add-photo-icon"></i>
</div>
-->
<div class="add-more-pictures tooltipstered" ngf-select="uploadMorePostFiles($file, $invalidFiles)" accept="image/*" ngf-max-size="@{{ $root.constants.MAX_IMAGE_SIZE }}" title="Add more photos">
<i class="plus icon add-photo-icon"></i>
</div>
<script>
//display post image overlay on hover effect
$(document).on('mouseenter', '.post-crop-image', function() {
// $('.image-item .overlay').show();
$(this).parent().find('span.overlay').show();
});
$(document).on('mouseleave', '.post-crop-image', function() {
// $('.image-item .overlay').show();
$(this).parent().find('span.overlay').hide();
});
</script>
</body>
</html>
And this is what it shows in Firefox…
2 Likes
PaulOB
December 18, 2016, 3:36pm
3
If you add jquery Ron then the problem becomes apparent (although it shouldn’t be left to us to work that out)
That’s because as soon as you hover ‘mousenter’ on the image then you add an overlay to cover the image and therefore you are no longer hovering over the image so the js immediately removes the overlay and then bingo you are hovering the image again so it shows the overlay again but hang on now the image is no longer hovered so the overlay is hidden and so on and so on…
For modern browsers you could add pointer-events:none to the overlay but that won’t work in IE so a better method is to throw away the JS and do it with some simple css by hovering the parent of the image and not the image itself.
e.g.
.image-item:hover .overlay{display:block}
That does the trick nicely and will not flicker.
If you are actually going to do more than show the overlay and perhaps perform some other js magic at the same time you can use the same css technique for the js and hover the parent to avoid the flicker.
<script>
$(document).on('mouseenter', '.image-item', function() {
$(this).find('span.overlay').show();
});
$(document).on('mouseleave', '.image-item', function() {
$(this).find('span.overlay').hide();
});
</script>
4 Likes
system
March 19, 2017, 10:36pm
4
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
