Эффекты при наведении на CSS

Чёрно-белый элемент при наведении

.myblock:hover { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; /* IE 6-9 */
}

Блик при наведении

.myblock:before { 
    content: "";
    position: absolute;
    width: 200%;
    height: 100%;
    top: -200%;
    left: -40%;
    opacity: .6;
    background-image: linear-gradient(180deg,rgba(255,255,255,0),#fff 47%,rgba(255,255,255,.6) 53%,rgba(255,255,255,0));
    background-image: linear-gradient(180deg,rgba(255,255,255,0),#fff calc(50% - 10px),rgba(255,255,255,.6) calc(50% + 10px),rgba(255,255,255,0));
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
}

.myblock:hover:before {
    top: 200%;
    transition: top .4s cubic-bezier(0,.3,1,.7);
}