vendredi 21 décembre 2018

Stripes Border on hover using image

I want to create Stripes Border.

I want to use the img tag or div tag to include the image and the Striped Border.

This is how it needs to look like:

enter image description here

Now I am trying like this with border image as svg.

.feed-item:after {
  background: #0055b9;
  background: url(../images/studentslab_hover_bg.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 4vw 2.7vw 2vw 2vw;
  width: 104%;
  opacity: 0;
}

.feed-item:hover:after {
  opacity: 1;
  z-index: -1;
}

But in responsiveness, it's not covering full sometimes. So I want to use it like a border. is there any way?

Aucun commentaire:

Enregistrer un commentaire