Hover transitions

Support
#1

Hello,

I have the opiod column link and I would like the on hover to have a color overlay. Also I have an ease in transition when you mouse over but on mouse out the transition is not there. And the transition is not working on safari. I attached a screenshot of my code. The url is: https://mcmahonforda.com

Thanks in advance

#2

Hi @Jennine,

Thanks for writing in!

Please be advised that you cannot have two or more elements using the same ID. An element ID must be unique and should be only used once. If you want to apply the hover effect in other columns, please make use of the class instead. And then use this updated custom css code:

.issues-col{
    position:relative;
}

.issues-col{
    opacity: 1;
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    transition:all 0.3s ease;
}

.issues-col:hover{
    opacity: 0.4;
}

.issues-col > a{
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:10;
}

We would loved to know if this has work for you. Thank you.

#3

Thank you that helped with the transitions. Is there a way I can put a color overlay on hover. For now I just changed the opacity but I would really like a blue overlay on hover. Thank you

#4

Hello @Jennine,

If you want to add a background overlay, please remove the given code and update it using this code instead:

.issues-col{
    position:relative;
}

.issues-col{
    opacity: 1;
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    transition:all 0.3s ease;
}

.issues-col:before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: green;
    opacity: 0;
}

.issues-col:hover:before{
    opacity: 0.75;
}

.issues-col > a{
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:10;
}

Feel free to change the color green to anything that matches your site design.

#5

That worked great thanks, but for some reason the ease transitions stopped working.

#6

Hello @Jennine,

We can move the transitions to the overlay instead:

.issues-col{
    position:relative;
}

.issues-col:before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: red;
    opacity: 0;

    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    transition:all 0.3s ease;
}

.issues-col:hover:before{
    opacity: 0.5;
}

.issues-col > a{
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:10;
}

We would loved to know if this has work for you. Thank you.

#7

Thank so much! That worked perfectly. I added the cursor:pointer to get the hand on hover but it sonly working on the first column. Do you know why? Thank you

#8

Hello @Jennine,

Your code did not work because only the first column has the <a> tag. If you want to have a cursor in all the columns even if it does not have a link or <a> tag in it, please use this instead:

 .issues-col{
    position:relative;
    cursor: pointer;
}

.issues-col:before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: red;
    opacity: 0;

    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    transition:all 0.3s ease;
}

.issues-col:hover:before{
    opacity: 0.5;
}

.issues-col > a{
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:10;
}

Please let us know how it goes.

#9

Perfect. Thanks so much!

#10

You are most welcome!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.