During Hover, the animated element flickers.

talk design
1

I put this css on my site and when i hover over, the element moving in will flicker…like the css is resetting. Not sure how to stop this. Does anyone have any thoughts?

thanks

.dt1{
	background-color: white;
	margin: 10px;
  position: absolute;	
  visibility: hidden;
  top: 0px;
 
}

.d1:hover ~ .dt1 {
	background: white;
	color: #060606;
	margin: 10px;
	font-size: 28px;
	font-weight: bold;
	text-align: center;
	border: 5px #060606 solid;
	transition: transform 1s ease-in;
	transform: translate3d(0px, 0px, 0px);
  visibility: visible;
}

.d1:hover ~ .dt1 {
	background: white;
	color: #060606;
	margin: 10px;
	font-size: 28px;
	font-weight: bold;
	text-align: center;
	border: 5px #060606 solid;
	/*transition: transform 1s ease-in;		*/
	
	transition: transform 1s ease-in;
	transform: translate3d(0px, 0px, 0px);
  /*visibility: visible;*/	
}
2

Do you have a link to a live example?

3

Hi, Yes on this page.

http://strategiccommercialcapital.com/index.php/closings

Here is also a video https://www.screencast.com/t/ZC6U5Oa9

4

Ah, I see it now. Give this div element a unique id:

<div class="thrv_wrapper thrv_text_element dt1">
    <p>Comfort Inn Suite - Ohio</p>
    <p>$4,670,000</p>
</div>

Let’s say you id that element as overlayText. Add the pointer-events: none property to ensure it doesn’t interfere with your hovering behavior:

#overlayText {
    pointer-events: none;
}

That should fix it :slight_smile:

5

that worked. Thank you!

1 Like