I'm having trouble aligning the :hover state with the original footer image links.
Here is an edited version of the flicker issue I encountered on Chrome, while nothing appeared on Safari.
https://i.sstatic.net/ExdPW.png
I apologize for linking to the actual website, as I couldn't replicate the problem in a jsfiddle.
Website :
(NSFW)
Code :
<div class="row pp-thumbs">
<div class="pp-thumb column" data-xl-width="2" data-sm-width="4" data-xs-width="6">
<a href="http://couill.art/project/about-duplicate" title="About"><img src="http://couill.art/wp-content/uploads/2018/05/trio-trompettes-rouge-thumb-0-00-36-07.png" width="200" height="150"></a>
<p class="pp-title"><a data-font="font_dqju2lgtu" href="http://couill.art/project/about-duplicate" title="About">About</a><span data-font="font_dqju2lgtu">Animation</span></p>
</div>
...
.project-panel .pp-thumb img {
display: inline-block;
width: 100%;
height: auto;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.project-panel .pp-thumb img:hover {
display: block;
width: 100%;
height: auto;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-left: 170px;
}
.project-panel .pp-thumb a[title="Danger Zone"]:hover>img {
background: url(http://couill.art/wp-content/uploads/2018/05/Thicc-girls-slim-boi.gif) no-repeat;
background-size: contain;
}
...
.project-panel .pp-thumb {
margin: auto !important;
}
Appreciate your assistance.