# During Hover, the animated element flickers.

**URL:** <https://forum.kirupa.com/t/during-hover-the-animated-element-flickers/639860>\
**Category:** design\
**Created:** [May 24, 2019, 3:42am UTC](https://forum.kirupa.com/t/during-hover-the-animated-element-flickers/639860 "2019-05-24T03:42:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![collegemike](https://avatars.discourse-cdn.com/v4/letter/c/858c86/32.png) [@collegemike](https://forum.kirupa.com/u/collegemike)\
**Post date:** [May 24, 2019, 3:42am UTC](https://forum.kirupa.com/t/during-hover-the-animated-element-flickers/639860/1 "2019-05-24T03:42:14Z")

</div>

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;*/	
}
```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 24, 2019, 3:45am UTC](https://forum.kirupa.com/t/during-hover-the-animated-element-flickers/639860/2 "2019-05-24T03:45:08Z")

</div>

Do you have a link to a live example?

---

<div class="post-metadata">

**Author:** ![collegemike](https://avatars.discourse-cdn.com/v4/letter/c/858c86/32.png) [@collegemike](https://forum.kirupa.com/u/collegemike)\
**Post date:** [May 24, 2019, 3:51am UTC](https://forum.kirupa.com/t/during-hover-the-animated-element-flickers/639860/3 "2019-05-24T03:51:30Z")

</div>

Hi, Yes on this page.

[http://strategiccommercialcapital.com/index.php/closings](http://strategiccommercialcapital.com/index.php/closings)

Here is also a video [https://www.screencast.com/t/ZC6U5Oa9](https://www.screencast.com/t/ZC6U5Oa9)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 24, 2019, 4:41am UTC](https://forum.kirupa.com/t/during-hover-the-animated-element-flickers/639860/4 "2019-05-24T04:41:57Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![collegemike](https://avatars.discourse-cdn.com/v4/letter/c/858c86/32.png) [@collegemike](https://forum.kirupa.com/u/collegemike)\
**Post date:** [May 26, 2019, 3:14pm UTC](https://forum.kirupa.com/t/during-hover-the-animated-element-flickers/639860/5 "2019-05-26T15:14:43Z")

</div>

that worked. Thank you!