More than 5 years have passed since last update.

CSS 要素の上に霧を被せる

CSS
CSS3

Posted at 2015-08-22

html


<div><img src="sample.JPG"></div>

CSS


div{
  width: 300px;
  height: 300px;

   /* 霧 */
  box-shadow:
    -100px -100px 500px 0 #eee inset,
     100px  100px 500px 0 #eee inset;

  transition: 3s;
}

div img{ 
  width: 300px;
  height: 300px;
  position: relative;
  z-index: -1;
}

div:hover{
  box-shadow: none;
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up