Promoted Links Edit Hover Behavior or remove animation

Question

*** I managed to get closer to a solution, by implementing the css code at the end of this post, this allows me to disable the Promoted links overlay so it doesn't interfere with the background color change. however, doing this removed my title display of each tile since that is part of the overlay. i need to find a way to add them back in while keeping the current end result. Any thoughts?

----------- Original Post ------------

Is there a way to edit the behavior of the promoted links hover or remove the animation using CSS?

I do not have access to the design suite (online portal only) due to company policy so i need to do everything on the page in a script editor web part (i think) On hover i want the background of the tile to change from blue to cyan and to underline the text title but to keep it in place and not move to top. im very new to coding (zero prior experience with html, CSS, or any other website coding (graphic designer by trade)), what ive currently managed is from lots of google and trial and error (lots of error).

Below is the code i have managed to get my promoted links to look like this.

Any help would be greatly appreciated, im at such a loss.

    <style type="text/css">
/* This section turns the Arrows on or off. For responsive design purposes, I would keep this and maybe left justify it, or at least move around the webpart to make it look good, but retain the functionality you're looking for. */ 
#WebPartWPQ9
.ms-promlink-header{
display:none;
} 
</style>

<style type="text/css">
/* BG was larger than image by "right" class, this removes it */
#WebPartWPQ9
.ms-promlink-body img{
right:inherit!important;
}
</style>


<style type="text/css">
/* Body, keep big enough for the amount of tiles you want on a line - 3 lines. If your tiles are 150px by 150px, and you want 3 per row, set the width to 450(PLUS your padding set below-- so like... 475px) and height to 150. */
#WebPartWPQ9
.ms-promlink-body {
height: 118px;
width: 354px;
}
</style>

<style type="text/css">
/*change the size of the tile canvas*/
#WebPartWPQ9
.ms-tileview-tile-root {
     width: 118px! important;
     height: 118px !important;
}
</style>

<style type="text/css">
/*change the size of the tile*/
#WebPartWPQ9
.ms-tileview-tile-content {
     width: 118px !important;
     height: 118px !important;
margin-bottom: -40px !important;
}
</style>

<style>
/*change the size of the image on the tile*/
#WebPartWPQ9
div.ms-tileview-tile-content > a > div > img {
height: 118px !important;
width: 118px !important;
}
</style>

<style type="text/css">
/*remove the top margin from the details box after hovering with your mouse*/
#WebPartWPQ9
.ms-tileview-tile-detailsBox:hover {
margin-top: 0px;
/* addtional, Color change hover effect */
background-color: rgba(0,0,0,0.0);
/*additional, underline hover effect */
text-decoration: underline;
</style>




<style type="text/css">
/* Changes Webpart Background Color */
#WebPartWPQ9 {
        background-color: #007ab8;
}
</style>

<style type="text/css">
/* Set Bottom Border Style Cyan Thick */
    #WebPartWPQ9 {
border-bottom-width: 45px;
border-bottom-color: #00a3f5;
}
</style>

<style type="text/css">
/* Set Top Border Style None */
    #WebPartWPQ9 {
border-top-style: none;
}
</style>

<style type="text/css">
/* Set Left Border Style None */
    #WebPartWPQ9 {
border-left-style: none;
}
</style>

<style type="text/css">
/* Set Right Border Style None */
    #WebPartWPQ9 {
border-right-style: none;
}
</style>

<style type="text/css">
/* Tiles, alter color of individual backgrounds. Setup for WebPartWPQ9 Navigation Menu */
#WebPartWPQ9
.ms-promlink-body img[alt*='High Fives'] { 
background-color: #0084c7; 
}
.ms-promlink-body img[alt*='Documents'] { 
background-color: #007fbf; 
}
.ms-promlink-body img[alt*='Videos'] { 
background-color: #0084c7; 
}
.ms-promlink-body img[alt*='Forms'] { 
background-color: #007fbf; 
}
.ms-promlink-body img[alt*='Policies'] { 
background-color: #0084c7; 
}
.ms-promlink-body img[alt*='FOCI'] { 
background-color: #007fbf; 
}
.ms-promlink-body img[alt*='CI Briefings'] { 
background-color: #0084c7; 
}
.ms-promlink-body img[alt*='Suggestions'] { 
background-color: #007fbf; 
}
.ms-promlink-body img[alt*='Quick Links'] { 
background-color: #0084c7; 
}
</style>

<style type="text/css">
/* Tile hover color change */
#WebPartWPQ9
.ms-promlink-body img:hover { 
background-color: #0099e6 !important; 
}
/* Remove Overlay to not interfere with background color change */
#WebPartWPQ9
.ms-tileview-tile-detailsBox {
display: none !important;
}
</Style>

Answer 1

<style>
    .ms-tileview-tile-detailsBox: {
        pointer-events: none;
        background-color: transparent;
     }
</style>

I was able to remove the overlay interfering with the background color change of the tile. however, doing this prevents the text underline and the text still moves around. getting closer.

Answer 2

Try this, If I'm understanding your question correctly.

<style>
    .ms-tileview-tile-detailsBox:Hover {
        background-color: rgba(0,255,255, 0.6);
        border-bottom: 5px black;
     }
</style>