Note that there are some explanatory texts on larger screens.

plurals
  1. PO-webkit-filter: grayscale() is causing me problems on hover css
    primarykey
    data
    text
    <p>Hey so I am making tumblr themes and for some odd reason, the grayscale effect is only sometimes adding padding on some random elements on the blog including the images. It makes no sense that this is because of the filter, but when I turn off the filter, nothing like this happens. I have tried many different methods, I will list some below:</p> <pre><code>.gray { -webkit-filter: grayscale(.7); -webkit-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out;} .gray:hover{ -webkit-filter: grayscale(0); -webkit-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } ---------------------------------------- #content img { -webkit-filter: grayscale(.7); -webkit-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out;} #content:hover img{ -webkit-filter: grayscale(0); -webkit-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } ---------------------------------------- #content:hover img{ -webkit-filter: none; -webkit-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .gray { -webkit-filter: grayscale(.7); -webkit-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out;} </code></pre> <p>I wont keep going because of redundancy, but you get the point! So I have images in the content ID and I am trying to get them to be black and white and on hover turn normal, which I did, but for some reason, it sometimes adds the padding on hover. Any clue as to why this happens or is there anything faulty in the way I am doing the grayscale? </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload