1

*** 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).

my promoted links webpart style so far

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>
2
  • 3
    Just some pointers - you only need one start and end tag for declaring your CSS. <style type="text/css">All CSS here</style>. And you can combine all the rules that are specified for #WebPartWPQ9 to a single rule. Border-left-style does not need to be separate rules. Dec 6, 2019 at 13:37
  • 1
    Ha, yeah i thought i could and in my troubleshooting trying to figure this all out i started down a dangerous path of over noting and seperation to diagnose problems. thank you very much for the comment, hopefully once i get everything worked out i can refine my code and make it more elegant/appropriate.
    – Dylan
    Dec 6, 2019 at 13:40

2 Answers 2

0

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>
1
  • Thank you very much for the suggestion Sarah, unfortunately no dice. I added !important to the end of these strings and while a change does happen, it is not what i am looking to do. i probably didnt not make my question clear. Currently my tile has an image, title, and background color when not moused over or clicked. the background color is blue and the title is normal. on mouseover i would like the background color to change from blue to cyan and the title to change from normal to underline. hopefully that makes it more understandable?
    – Dylan
    Dec 6, 2019 at 14:01
0
<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.

2
  • Able to prevent text movement using <style type="text/css"> .ms-tileview-tile-detailsBox { transition-delay: 999999s; } </Style>
    – Dylan
    Dec 11, 2019 at 20:42
  • added text underline by including <style type="text/css">.ms-tileview-tile-titleMediumExpanded {text-decoration: underline;}</style>
    – Dylan
    Dec 11, 2019 at 20:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.